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

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

      <el-form-item label="图片地址" :label-width="formLabelWidth" prop="listUploadId">
          <el-upload
              :action="actionUrl"   // 图片上传地址
              :headers="headers"   // 因为上传时需要token,所以需要自定义headers
              :before-upload="beforeUpload"   // 文件上传前的钩子，可以在这个钩子函数里判断上传的图片的类型和大小是否达标
              :limit="5"   // 上传图片的个数限制
              :on-exceed="exceed"   // 上传图片超出数量限制时的钩子
              :on-success="uploadSuccess"  // 上传成功时的钩子
              :on-remove="fileRemove"     // 文件列表移除文件时的钩子，也就是删除图片时会触发的钩子
              :file-list="imageList"   // 上传的文件列表，就是这个坑，下边会细说
              accept=".jpg, .jpeg, .png, .gif"   // 接受的图片类型
              list-type="picture-card"   // 文件列表的类型
              >
          <i class="el-icon-plus"></i>
          </el-upload>
      </el-form-item>

下边是相关的方法

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
      }
}

大概效果