一、效果
二、页面代码
<el-upload
ref="upload"
accept='image/jpeg,image/gif,image/png'
:auto-upload="true"
:headers="upload.headers" //头部,含token
:action="upload.url"
:limit="upload.limit" //上传图片张数限制
:multiple="upload.multiple" //是否允许上传多张
list-type="picture-card" //卡片式布局,还有其他类似列表式布局,参考官网
:on-preview="handlePreview" //预览事件
:on-remove="handleOutlineRemove" //删除图片
:on-success="handleOutlineSuccess" //上传成功
:file-list="upload.outlineFileList"> //存储图片的变量,回显时使用
<i class="el-icon-plus"></i>
</el-upload>
<!-- 图片预览对话框 -->
<el-dialog title="图片预览" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
三、script
import { getToken } from "@/utils/auth";
export default {
name: "ProductInfo",
data() {
return {
//图片预览对话框是否显示
dialogVisible: false,
//图片预览地址
dialogImageUrl: "",
// 图片上传
upload: {
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
//上传图片个数限制
limit: 5,
multiple: true,
outlineFileList: [],//传输插件存储的附件路径内容,提交和回显时赋值使用
},
}
}
//上传图片-图片预览
handleOutlinePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleOutlineSuccess(response, file, fileList) {
this.upload.outlineFileList=fileList;//将最新的图片数组(系统插件控制的)赋值给提交时绑定的变量,方便数据跟进和提交
},
//概要图片移除事件
handleOutlineRemove(file, fileList) {
this.upload.outlineFileList=fileList; //将最新的图片数组(系统插件控制的)赋值给提交时绑定的变量,方便数据跟进和提交
this.$message({
type: 'info',
message: '已删除原有图片',
duration: 1000
});
},
四、新增和修改提交代码部分
var productPicInfoList=[];//图片实体数组
for(var i=0;i<this.upload.outlineFileList.length;i++){
productPicInfoList.push({picDesc:this.upload.outlineFileList[i].name,picUrl:this.upload.outlineFileList[i].response.fileName,isMaster:0,picOrder:i});//将图片数据的数据转成后台对应实体类格式
}
this.form.productPicInfoList=productPicInfoList;//图片实体list放入form表单提交即可
五、修改是回显
this.upload.outlineFileList.push({name:response.data.productPicInfoList[i].picDesc,url:this.filePath+response.data.productPicInfoList[i].picUrl,response:{fileName:response.data.productPicInfoList[i].picUrl}});//注意:插件绑定的outlineFileList(1)在用户上传时,插件放入的object主要部分格式是{name:'',response:{fileName:url路径}}(2)回显时需要的Object是{name:'',url:url路径},否则不显示,即前面的response.fileName不回显,所以需要后台的数据赋值成{name:'',url:url路径,response:{fileName:url路径}},兼顾回显和回显后用户删除再新加图片时list实体格式不一致