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

前端傻小子

已于 2023-04-14 17:03:51 修改

阅读量7.6k

点赞数 1

分类专栏： element 文件上传文章标签： vue.js ui javascript

于 2023-04-14 17:00:20 首次发布

本文链接：https://blog.csdn.net/weixin_57262624/article/details/130157331

版权

element 文件上传专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章展示了如何使用Vue.js组件el-upload实现图片上传功能，包括限制上传文件类型为图片，提供缩略图预览，以及在删除时如何处理。通过before-upload方法校验文件类型，使用ref获取上传文件列表以便于删除操作。

摘要由CSDN通过智能技术生成

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

<el-upload
  :action="uploadFileServiceUrl"
  list-type="picture-card"
  :on-success="(response, file, fileList) => {handleSuccess(response, file, fileList)}"
  :file-list="fileList"
  accept="image/jpg,image/jpeg,image/png" 
  :before-upload="handleBeforeUpload"
  ref="upload"
  :auto-upload="true"
>
  <i slot="default" class="el-icon-plus"></i>
  <div slot="file" slot-scope="{file}">
    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
    <span class="el-upload-list__item-actions">
      <span
        class="el-upload-list__item-preview"
        @click="handlePictureCardPreview(file)"
      >
        <i class="el-icon-zoom-in"></i>
      </span>
      <!-- <span
        v-if="!disabled"
        class="el-upload-list__item-delete"
        @click="handleDownload(file)"
      >
        <i class="el-icon-download"></i>
      </span> -->
      <span
        v-if="!disabled"
        class="el-upload-list__item-delete"
        @click="handleRemove(file)"
      >
        <i class="el-icon-delete"></i>
      </span>
    </span>
  </div>
</el-upload>
<!-- 图片预览 -->
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt />
</el-dialog>

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

完整代码：

<el-upload
  :action="uploadFileServiceUrl"
  list-type="picture-card"
  :on-success="(response, file, fileList) => {handleSuccess(response, file, fileList)}"
  :file-list="fileList"
  accept="image/jpg,image/jpeg,image/png" 
  :before-upload="handleBeforeUpload"
  ref="upload"
  :auto-upload="true"
>
  <i slot="default" class="el-icon-plus"></i>
  <div slot="file" slot-scope="{file}">
    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
    <span class="el-upload-list__item-actions">
      <span
        class="el-upload-list__item-preview"
        @click="handlePictureCardPreview(file)"
      >
        <i class="el-icon-zoom-in"></i>
      </span>
      <!-- <span
        v-if="!disabled"
        class="el-upload-list__item-delete"
        @click="handleDownload(file)"
      >
        <i class="el-icon-download"></i>
      </span> -->
      <span
        v-if="!disabled"
        class="el-upload-list__item-delete"
        @click="handleRemove(file)"
      >
        <i class="el-icon-delete"></i>
      </span>
    </span>
  </div>
</el-upload>
<!-- 图片预览 -->
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
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获取到的数组格式