Commit b2af2ddf authored by Pan's avatar Pan

refine avatarUpload demo

parent dfd7ce8d
...@@ -694,7 +694,7 @@ ...@@ -694,7 +694,7 @@
// 上传成功 // 上传成功
function(resData) { function(resData) {
that.loading = 2; that.loading = 2;
that.$emit('crop-upload-success', url); that.$emit('crop-upload-success', resData);
}, },
// 上传失败 // 上传失败
function(sts) { function(sts) {
......
...@@ -4,13 +4,12 @@ ...@@ -4,13 +4,12 @@
由于我在使用时它只有vue@1版本,而且有些业务的需求耦合到七牛等等原因吧,自己改造了一下,如果大家要使用的话,优先还是使用官方component 由于我在使用时它只有vue@1版本,而且有些业务的需求耦合到七牛等等原因吧,自己改造了一下,如果大家要使用的话,优先还是使用官方component
</code> </code>
<PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'> <PanThumb :image='image'>
</PanThumb> </PanThumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像 <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
</el-button> </el-button>
<ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey" <ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow" />
v-show="imagecropperShow" />
</div> </div>
</template> </template>
<script> <script>
...@@ -21,13 +20,15 @@ ...@@ -21,13 +20,15 @@
data() { data() {
return { return {
imagecropperShow: false, imagecropperShow: false,
imagecropperKey: 0 imagecropperKey: 0,
image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
} }
}, },
methods: { methods: {
cropSuccess() { cropSuccess(resData) {
this.imagecropperShow = false; this.imagecropperShow = false;
this.imagecropperKey = this.imagecropperKey + 1; this.imagecropperKey = this.imagecropperKey + 1;
this.image = resData.files.avatar;
} }
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment