qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

refine avatarUpload demo

Browse source
This commit is contained in:
Pan 2017-04-28 10:02:45 +08:00
parent dfd7ce8d40
commit b2af2ddf02
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/ImageCropper/index.vue
View file

@ -694,7 +694,7 @@
// 上传成功
function(resData) {
that.loading = 2;
that.$emit('crop-upload-success', url);
that.$emit('crop-upload-success', resData);
},
// 上传失败
function(sts) {

11
src/views/components/avatarUpload.vue
View file

@ -4,13 +4,12 @@
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
</code>
<PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
<PanThumb :image='image'>
</PanThumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
</el-button>
<ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey"
v-show="imagecropperShow" />
<ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow" />
</div>
</template>
<script>
@ -21,13 +20,15 @@
data() {
return {
imagecropperShow: false,
imagecropperKey: 0
imagecropperKey: 0,
image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
}
},
methods: {
cropSuccess() {
cropSuccess(resData) {
this.imagecropperShow = false;
this.imagecropperKey = this.imagecropperKey + 1;
this.image = resData.files.avatar;
}
}
};