效果展示:
↓
(1) vue组件:
<a-upload
listType="picture-card"
class="avatar-uploader"
:showUploadList="false"
:action="uploadAction"
:data="{'isup':1}"
:headers="headers"
:beforeUpload="beforeUpload"
@change="handleChange"
>
<img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:140px;max-width:180px;border-radius:50%"/>
<div v-else style="height:140px;width:140px;padding-top:35%">
<a-icon :type="uploadLoading ? 'loading' : 'plus'" />
<div class="ant-upload-text" style="color: dimgray">上传头像</div>
</div>
</a-upload>
(2) 编写beforeUpload,handleChange,getAvatarView方法
写在method{ }中
beforeUpload: function(file){
var fileType = file.type;
if(fileType.indexOf('image')<0){
this.$message.warning('请上传图片');
return false;
}
//TODO 验证文件大小
},
handleChange (info) {
this.picUrl = "";
if (info.file.status === 'uploading') {
this.uploadLoading = true;
return
}
if (info.file.status === 'done') {
var response = info.file.response;
this.uploadLoading = false;
console.log(response);
if(response.success){
this.model.img= response.message;
this.picUrl = "Has no pic url yet";
}else{
this.$message.warning(response.message);
}
}
},
getAvatarView(){
return this.url.imgerver +"/"+ this.model.img;
},
(3) 添加引用
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
(4) 获取tocken
created () {
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token":token}
},
(5) 增加数据属性
data () {
return {
...
headers:{},
picUrl: "",
uploadLoading:false
}
}
(6) 增加上传路径
url: {
...
fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
imgerver: window._CONFIG['domianURL']+"/sys/common/view",
},
(7) 上传路径初始化:
(目前暂时将uploadAction方法放入method中)
computed:{
uploadAction:function () {
return this.url.fileUpload;
}
},
(8) 实现编辑时的显示
edit (record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'fname','fnumber','createBy','createTime','updateBy','updateTime','img'))
//时间格式化
});
this.picUrl = this.model.img;//以这句为主,设置model中的图片字段
},