1、elment的上傳組件的坑： file-list=“fileList”

兩種情況：

1、直接在頁面調用Upload 上傳組件，根據官網來
2、在對話彈窗使用Upload 上傳組件 (個人經歷踩坑了！！！！！)

在對話框el-dialog 使用上傳組件，個人知識技術比較菜，解釋不一樣正確，有問題的地方多謝指點。
坑所在：因為對話框是變量控制顯示隱藏的，我的需求是編輯功能，獲取后端數據url，回顯圖片，數據重構成官網demo的數據結構 ，依舊不行，后面在點擊顯示彈窗的時候，調用了this.nextTick()后正常渲染出圖片

 <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body :close-on-click-modal="false">
<el-upload
    ref="uploadImg"
            class="upload-demo"
            name="img"
            :headers="uploadImg.headers"
            :action="uploadImg.url"
            :on-progress="handleImgUploadProgress"
            :on-success="handleImgSuccess"
            :on-change="handleChangeImg"
            :on-remove="handleRemoveImg"
            :limit="10"
            :file-list="form.imgUrls"
            :disabled="uploadImg.isImgDisable"
            :auto-upload="true"
            list-type="picture">
           <el-button size="small" type="primary">點擊上傳</el-button>
           <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb(最多6張)</div>
    </el-upload>
</el-dialog>

/** 修改按鈕操作 */
    handleUpdate(row) {
      const id = row.id || this.ids
      getFoods(id).then(response => {
        this.open = true;//彈窗的變量控制
        this.reset();
        let data  = response.data
        data.ids = []
        this.$nextTick(()=>{ //下面是圖片數組，在頁面更新后面賦值！！
              data.imgUrls = data.imgUrls.map((v)=>{
                   data.ids.push(v.id)
                v.name = v.name || 'photo'
                v.url = v.filePath
                return v
        })
            this.form = data
            console.log( this.form,'修改按鈕操作form');
            this.title = "修改商品";
        })
       
      });
    },