【vue】使用el-upload 上傳圖片，遇到的問題

<el-upload
    class="upload-demo"
    ref="paymentUpload"
    :action="uploadUrl"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :file-list="orderInfo.payment_voucher"
    :on-success="handlepaymentSuccess"　　　　
    :on-change="handlepaymentChange">
    <div> <el-button type="text" class="upload-btn">上傳</el-button></div>
</el-upload>

問題一：上傳一個文件后在handlepaymentSuccess中打印this.orderInfo.payment_voucher 效果如下

 

 

 

 

 

 故：如果想接口中傳這個值時需要賦值

問題二：重組數據列表結構數據列表閃爍問題調研

代碼

//上傳成功
handlepaymentSuccess(response,file, fileList){
    //這樣寫會造成1.上傳的時候頁面閃爍，2.刪除后重新上傳之前上傳的還存在（待研究）
    let data = {
        name: file.name,
        url: file.response.data.fileurl,
    };
    this.orderInfo.payment_voucher.push(data);
    console.log(this.orderInfo.payment_voucher);
},

 

 

 

產生的問題：

• 上傳列表閃動
• 為何重組的數據中有status,uid字段
• 刪除后重新上傳之前上傳的還會存在

1、閃動問題方案一（沒有效果）：

/deep/.el-upload-list__item.is-ready {
  display: none;
}

鏈接：elementUi el-upload上傳圖片時圖片閃爍

2、閃動問題解決方案：

handlepaymentSuccess(response,file, fileList){
    this.orderInfo.payment_voucher = fileList;
},

ps:問題解決了，可是不知道為何要如此操作（這樣操作后,移除操作中不需要寫什么）

鏈接：餓了么UI組件庫中，Upload組件上傳閃動的解決

可是還是還沒有解決為何重組的數據中會有其他的字段，待解決

 3、刪除后重新上傳之前上傳的還會存在

//刪除上傳列表
handleRemove(file, fileList) {
    this.orderInfo.payment_voucher = fileList;
},