elementui 展示列表模板_vue+element-ui 多图显示
element-ui 多图上传 图片显示问题代码:action="/api/Upload/uploadImg"list-type="picture-card"accept=".jpg,.jpeg,.gif,.png,.jpeg":limit='5':show-file-list="true":file-list="editFiles":on-success="handleAvatarSu...
element-ui 多图上传 图片显示问题
代码:
action="/api/Upload/uploadImg"
list-type="picture-card"
accept = ".jpg,.jpeg,.gif,.png,.jpeg"
:limit = '5'
:show-file-list="true"
:file-list="editFiles"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
handleRemove(file, fileList) { //移除图片
this.fileChange(fileList);
},
handlePictureCardPreview(file) { //预览图片调用
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleAvatarSuccess(res, file,fileList) {
this.imageUrl = URL.createObjectURL(file.raw);
this.fileChange(fileList);
},
fileChange(fileList){
let temp_str = '';
if(fileList.length > 0) {
for(let i=0;i
if(fileList[i].response){
if(fileList[i].response.errcode === 0){
if(i===0) {
temp_str += fileList[i].response.path;
}else{
temp_str += ',' + fileList[i].response.path;
}
}
}
}
}
this.supplyForm.thumb += temp_str;
// console.log(this.supplyForm.thumb);
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isLt2M;
},
//照片展示
initInfo(temp) {
let list = [];
list = temp.split(',');
for(let i=0;i
this.editFiles.push({name:'name',url:list[i]})
}
},
更多推荐
所有评论(0)