根據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數組進行處理