vue+element ui 文件上传之文件缩略图缩略图

文件缩略图按官方文档说的是使用 scoped-slot 去设置缩略图模版。且需要上传的是图片，因为有预览等功能，如果上传的不是图片，会显示不出来。

这里设置了图片的格式等，用户在选择的时候，会自动校准图片格式，官方文档中提供了before-upload方法，可以防止用户在选择文件的时候使用查看所有文件的方式。

 完整代码：

  
  

    
    
      
        
      
      
      
        
      
    
  



  

export default {
  name: "",
  data() {
    submitForm4: {
      fileIdList: []
    },
    uploadFileServiceUrl: 'xxx', // 文件上传的接口地址
  },
  methods: {
    handleSuccess(response, file, fileList){
      response.data.forEach((item,index) => {
        this.submitForm4.fileIdList.push(item.fileID)
      })
      
    },
    // 判断上传的是否为图片
    handleBeforeUpload(file) {
      var img = file.name.substring(file.name.lastIndexOf('.') + 1)
      const suffix = img === 'jpg'
      const suffix2 = img === 'png'
      const suffix3 = img === 'jpeg'
      // const isLt1M = file.size / 1024 / 1024 < 1;
      if (!suffix && !suffix2 && !suffix3) {
          this.$message.error("只能上传图片！");
          return false
      }
      // 可以限制图片的大小
      // if (!isLt1M) {
      //     this.$message.error('上传图片大小不能超过 1MB!');
      // }
      return suffix || suffix2 || suffix3
    },
    handleRemove(file,fileList) {
      const uploadFiles = this.$refs.upload.uploadFiles;
      for (let i in uploadFiles) {
        if (file.url === uploadFiles[i].url) {
          uploadFiles.splice(i, 1);
        }
      }
      // console.log(uploadFiles,'uploadFilesuploadFiles')
      this.getFileID(uploadFiles)
    },
    getFileID(fileList){
      let deleFileId = []
      fileList.forEach((item,index) => {
        console.log(index,item.response.data)
        item.response.data.forEach((item,index) => {
          // console.log(index,item)
          deleFileId.push(item.fileID)
          
        })
      })
      this.submitForm4.fileIdList = deleFileId

    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
}

这里删除的时候需要注意的是，缩略图中，删除时没有整体的fileList参数，所以需要使用ref来获取所有上传的图片列表，这样子在删除的时候，就可以确定用户删除的，是哪一张图片了。

最后，附上删除时利用ref获取到的数组格式