我這里的功能需求是上傳圖片环葵，就不細(xì)說(shuō)了贴妻，代碼如下

      <el-form-item label="圖片地址" :label-width="formLabelWidth" prop="listUploadId">
          <el-upload
              :action="actionUrl"   // 圖片上傳地址
              :headers="headers"   // 因?yàn)樯蟼鲿r(shí)需要token,所以需要自定義headers
              :before-upload="beforeUpload"   // 文件上傳前的鉤子，可以在這個(gè)鉤子函數(shù)里判斷上傳的圖片的類(lèi)型和大小是否達(dá)標(biāo)
              :limit="5"   // 上傳圖片的個(gè)數(shù)限制
              :on-exceed="exceed"   // 上傳圖片超出數(shù)量限制時(shí)的鉤子
              :on-success="uploadSuccess"  // 上傳成功時(shí)的鉤子
              :on-remove="fileRemove"     // 文件列表移除文件時(shí)的鉤子病线，也就是刪除圖片時(shí)會(huì)觸發(fā)的鉤子
              :file-list="imageList"   // 上傳的文件列表危队，就是這個(gè)坑肴沫，下邊會(huì)細(xì)說(shuō)
              accept=".jpg, .jpeg, .png, .gif"   // 接受的圖片類(lèi)型
              list-type="picture-card"   // 文件列表的類(lèi)型
              >
          <i class="el-icon-plus"></i>
          </el-upload>
      </el-form-item>

下邊是相關(guān)的方法

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
            })
          })
      })
    },
    // 上傳圖片超出數(shù)量限制時(shí)的鉤子
    exceed(files, fileList){
          this.$message.error('最多上傳5張圖片哦宙枷！')
    },
    // 文件上傳前的鉤子掉房，數(shù)為上傳的文件
     beforeUpload(file) {
          // 判斷圖片是否大于2M
          const isLt2M = file.size /1024/1024 < 2;
          // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
          // 判斷圖片的類(lèi)型
          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('上傳圖片大小不能超過(guò) 2MB!');
              return false
          }
      },
      // 上傳成功時(shí)的鉤子
      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
      },
      // 文件列表移除文件時(shí)的鉤子
      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