Element UI上传图片和PDF，支持预览

背景

如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；

做法

index.vue

javascript 复制代码

<template>
  <div>
    <el-upload
      v-model="diaForm.list"
      :limit="5"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :before-upload="beforeAvatarUpload"
      :on-remove="handleRemove"
      :headers="reqHeaders"
      :on-success="onUploadSuccess"
      :action="uploadUrl()"
      :file-list="resultFileList"
      list-type="picture"
      class="upload-files"
      accept=".png,.jpeg,.gif,.pdf,.jpg,.JPG">
      <div class="upfile-btn">
        <d2-icon name="document-upload" class="document-upload" />
        <div>点击上传+拖拽上传</div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { workOrderUploadUlr } from '@/api/upload';
export default {
  data() {
    return {
      diaForm: {
        desc: '',
        list: [],
      },
      resultFileList: [],
    };
  },
  methods: {
    // 限制上传个数不超过5个
    handleExceed(files, fileList) {
      if (fileList && fileList.length == 5) {
        this.$message.warning('XXXX');
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    // 限制不超过30M
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 30;
      if (!isLt5M) {
        this.$message.error('XXXX');
      }
      return isLt5M;
    },
    // 移除文件
    handleRemove(file, fileList) {
      if (!file) {
        return;
      }
      const index = this.resultFileList.findIndex(item => item.uid === file.uid);
      this.resultFileList.splice(index, 1);
    },
    // 设置请求头里面的token 和 userId
    reqHeaders() {
      return {
        token: this.$util.cookies.token,
        userId: this.info ? this.info.userId : '',
      };
    },
    // 上传成功，返回
    onUploadSuccess(response, file, fileList) {
      if (response && response.code === 'APPLY_SUCCESS') {
        if (response.data) {
          this.resultFileList.push({
            url: response.data.url,
            name: response.data.name,
            uid: file.uid
          });
          this.dealPDF();
          setTimeout(() => {
            this.dealPDF();
          }, 1);
        }
      } else if (response && response.msg) { console.log('upload failed', response.msg); }
    },
    // 上传的服务器的地址
    uploadUrl() {
      return workOrderUploadUlr();
    },
    dealPDF() {
      var liElements = document.querySelectorAll('ul.el-upload-list.el-upload-list--picture li.el-upload-list__item');
      liElements.forEach(function(liElement) {
        var aElement = liElement.querySelector('a.el-upload-list__item-name');
        if (aElement && aElement.textContent.includes('.pdf')) {
          var imgElement = liElement.querySelector('img.el-upload-list__item-thumbnail');
          if (imgElement) {
            imgElement.src = 'https://sg-pay69e4d75928dac6fddd3229a/file.png'; // 替换为你想要的新图片的URL
          }
        }
      });
    },
  }
};
</script>

<style>

</style>

upload.js

javascript 复制代码

// import request from '@/plugin/axios';
const host = require('../../host');
// 工单文件上传
export function workOrderUploadUlr(hostType = 'BASIC_GATE') {
  return host.getBaseUrl(hostType) + 'xxxxx/file/upload';
}