element-ui upload上传组件踩坑之——fileList

我这里的功能需求是上传图片，就不细说了，代码如下

下边是相关的方法

methods:{
      //获取商品信息
    getGoodsInfo(){
      this.$http.get(`/scyyGoodsStore/${this.id}`).then(({data:res}) => {
          if(res.code !== 200){
            return this.$message.error(res.msg);
          }
          this.form = {
            ...this.form,
            ...res.data
          }
          let imgList = this.form.imageVoList
          imgList.forEach( item => {
            this.imageList.push({
              id:item.id,
              url:item.imageUrl
            })
          })
      })
    },
    // 上传图片超出数量限制时的钩子
    exceed(files, fileList){
          this.$message.error('最多上传5张图片哦！')
    },
    // 文件上传前的钩子，数为上传的文件
     beforeUpload(file) {
          // 判断图片是否大于2M
          const isLt2M = file.size /1024/1024 < 2;
          // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
          // 判断图片的类型
          const isJpg = file.type ==  'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png' || file.type == 'image/gif'
          if(!isJpg){
              this.$message.error('只能上传jpg, jpeg, png, gif格式的图片！')
              return false
          }
          if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB!');
              return false
          }
      },
      // 上传成功时的钩子
      uploadSuccess(res,file,fileList){
        if(res.code !== 200){
            return this.$message.error(res.msg)
        }
        this.imageList.push(res.data)
        let formImgList = []
        this.imageList.forEach(item => {
          formImgList.push({
            id:item.id,
            imageType:0
          })
        })
        this.form.listUploadId = formImgList
      },
      // 文件列表移除文件时的钩子
      fileRemove(file, fileList){
          this.imageList= fileList
          const list = []
          this.imageList.forEach(item => {
              list.push({
                id:item.id,
                imageType:0
              })
          })
          this.form.listUploadId = list
      }
}

大概效果

image.png