根据element-ui官方文档，照片墙的api格式复制到本地，发现执行没问题，一切完美
但是实际的业务需求：1、需要自定义上传图 2、需要删除+看大图 3、将上传成功的图片，每个图片的名称，由逗号隔开组成的字符串传给接口
template部分
<el-upload action="" list-type="picture-card" :http-request="uploadFile"
:file-list="fileList1"
:on-success="onSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>
js部分
data部分：
fileList1: [],
fileList2: [],
fileListIndex: 1
methods方法部分：
uploadFile: function (param) {
var that = this;
var form = new FormData();
form.append("file", param.file);
that.$http.post('接口地址', form, {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress: progressEvent => {
let percent = (progressEvent.loaded / progressEvent.total * 100) | 0
//调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
param.onProgress({ percent: percent })
}
}).then((res) => {
//上传成功 调用onSuccess方法，否则图片右上角没有绿色的对号的icon(完成图标)
//处理自己的逻辑
param.onSuccess(res);//必须传参res,否则在onsuccess的参数里面，response属性值为undefined，如果传了值，则会把res的值作为response的属性值
})
},
onSuccess(response, file, fileList) {
//这里的fileList就是一个数组，里面的response属性值，就是res的传参
switch (this.fileListIndex) {
case '1':
this.fileList1 = fileList//如果有多个地方，需要分别上传相应的图片，那么在onSuccess回调里面，就需要分别给fileList1给赋值，不然fileList1是空数组
break;
case '2':
this.fileList2 = fileList
break;
default:
console.log(response, file)
break;
}
},
以上代码，上传成功后，先出现本地图片，然后图片右上角出现一个绿色的对号icon,但是通过审查元素，发现图片还是本地的biob:http:...这样的本地地址，并不是接口返回的url地址，所以如果接口传参，需要传图片对应的url或者name需要对fileList1和fileList2等等，自己自定义的file-list数组进行处理