Vue3+Elementplus upload上传图片组件fileList 采坑记录

复用一个EL-Dialog，实现新增/编辑商品功能

1.实现功能：

利用Props从商品展示界面传row数据过来，实现编辑商品功能。如果不传数据过来，就是新增商品功能。
简化后的代码：

代码复制过来格式很乱，可能有些小的符号遗漏

HTML：
            <el-upload
                class="upload-demo"
                action="https://upload.qiniup.com"
                :data="postPicData"
                :before-remove="beforeRemove"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
                :on-error="handleError"
                :file-list="picfileList"
                :limit="1"
                list-type="picture"
                accept=".png, .jpg, .jpeg"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <template #tip>
                <div class="el-upload__tip">只能上传一张作为封面,格式为 jpg/jpeg/png 且不超过 10MB</div>
              </template>
            </el-upload>
script：
       export default {
              name: "dialog", 
              data(){
              return{
                 picfileList:[{}]， //保存图片的fileList
                }
              },
                updated() { //生命周期钩子，每次更新dialog时加载表单数据
                this.loadFormData()
             }，
             props: {
              diaFormData:{    //父组件传过来的用于初始化表单的数据
              type:Object,
              default:()=>({
              gcover:null     //封面url
              })，
              method：{
                  loadFormData(){
                        this.picfileList[0].url = this.diaFormData.gcover
                    }
              }   
     }
  },
  

2.问题描述：

编辑商品的时候没有问题，但是每次打开新增商品时，都会出现一个空对象占据fileList。
打印一下：

3.问题解决：

经过奋斗与请教同学，错误锁定在这一行picfileList:[{}]即使不传值进来，也会创建一个空对象。
所以转换下思路，从原本的定义一个对象数组---->定义一个数组向其中添加对象。
修改后的部分代码：

data(){
              return{
                 picfileList:[]， //改动1
                }
            },
methods:{
   loadFormData() {   //改动2
      let imgurl = {}
      imgurl.url = this.diaFormData.gcover
      if (this.diaFormData.gcover != null) {
        this.picfileList.push(imgurl)
      }
      dialogclose() {   //改动3 关闭dialog时清空fileList
      this.picfileList = []
        }
    }
}

至此问题解决。

Dialog作为组件的父子组件通信参考我之前的文章将element Dialog作为组件，实现点击登陆按钮弹出登录界面思路记录

---

努力，进取，奋斗！