vue2 el-upload上传附件组件

<!-- 上传附件组件 -->
<template>
  <div>
    <p style="font-weight:600" v-show="!(limit == 1 && fileList.length > 0)">
      <span v-show="showDownloadTemp" class="temp fl" @click="downloadTemp"
        style="color:#346FFE;margin-right:5px;margin-bottom:10px;font-weight:400;cursor: pointer;">(下载模板)</span>
      <span class="tag">{{ tag }}</span>
      <el-upload :accept="accept" :data="{ ...data }" :headers="headers"
        :limit="limit" :multiple="multiple" :file-list="fileList" :on-exceed="handleExceed" v-loading="uploading"
        :action="actionUrl ? httpHeader + actionUrl : httpHeader + '/file/uploadFileCommon'" :show-file-list='false'
        :before-upload="beforeUpload" :on-success="fileUploadSuccess" style="display:inline-block; margin: 0 0 2px 0">
        <!-- <el-button type="primary" class="up-btn">
          <i class="up_ico"></i>
          <span>上传文件</span>
        </el-button> -->
          <div class="addUpload"><i class="el-icon-upload2"></i>上传文件</div>
      </el-upload>
      <span v-show="acceptTip&&tipPosition=='right'" style="font-size: 12px; color: #bbb;line-height: 10px;margin-left:4px;">*{{ acceptTip }}</span>
    </p>
    
    <div v-show="!hideFileList" v-for="(successFile, index) in fileList" :key="index" class="uploadFileItem">
      <div class="file-shadow" style="display: inline-block;margin-bottom: 4px">
        <i class="el-icon-s-order"></i>
        <span class="formFile">{{ successFile.originalName ? successFile.originalName : successFile.name }}</span>
        <img class="icon-download" src="@/assets/img/delete.png" @click="deleteFile(index, successFile)">
      </div>
    </div>
    <p v-show="acceptTip&&tipPosition!='right'" class="tips" style="font-size: 12px; color: #bbb;line-height: 10px;margin-bottom: 4px;">*{{ acceptTip }}</p>
  </div>
</template>
<script>
import { delFile, delImage } from '@/fetch/file'
export default {
  name: 'upload',
  // data:上传参数
  // actionUrl:上传接口,默认/file/uploadFileCommon
  // accept:文件格式限制
  // acceptTip:提示
  // tipPosition:提示语位置
  // limit:限制上传文件个数，默认不限制
  // showDownloadTemp:是否显示下载模板按钮
  // showErrExcel:是否提示下载错误提示文档
  props: ['value', 'data', 'actionUrl', 'accept', 'multiple', 'acceptTip','tipPosition', 'limit', 'tag', 'showDownloadTemp','hideFileList','showErrExcel'],
  data() {
    return {
      httpHeader: location.origin + process.env.VUE_APP_BASE_API,
      uploading: false,
      fileList: [],
      headers: {'GREETEC-TOKEN': window.localStorage.getItem('token')},
    }
  },
  watch: {
    value: {
      handler(n) {
        this.fileList = n ? n : []
      },
      immediate: true
    }
  },
  methods: {
    beforeUpload(file) {
      this.uploading = true
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.'))
      const whiteList = this.accept ? this.accept.split(',') : []
      if (whiteList.length > 0 && whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件只支持 ' + this.accept.split(',').join('、') + ' 等格式')
        this.uploading = false
        return false
      }
      const obj = this.fileList.find(item => item.originalName === file.name);
      if (obj !== undefined) {
        this.$message.error('不能上传同名文件');
        this.uploading = false
        return false;
      }
    },
    // 文件上传成功
    fileUploadSuccess(res, file, fileList) {
      const { data, success, info, code } = res;
      if (code === 4001) return (window.location.href = '/login?redirectUrl=' + window.location.href);
      if(this.showErrExcel){
        this.uploading = false;
        if(data.val==2){//文件填写内容不符合要求，请修改后重新上传
          this.$confirm(res.data.info, '提示', {
            confirmButtonText: '下载错误提示文档',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$emit('downloadErrorExcel',res.data.file)
          })
          this.fileList = [];
        }else if(data.val===0){//成功
          //由于fileList是所有的文件包含之前已上传过的，这里需要做区分（带response的即为新上传的）
          fileList.map(item => {
            if (item.response?.data) {
              item.id = item.response.data.materialFileId
            }
            if (item.id.id) {
              item.id = item.id.materialFileId
            }
            item.response && this.fileList.push({ originalName: item.name, id: item.id, tag: this.data ? this.data.tag : '',size:item.size });
          })
        }else{
          this.$alert(res.data.info, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {})
          this.fileList = [];
        }
        this.$emit('input', this.fileList)
      }else if (success) {
        if (fileList.every(item => item.status == "success")) {
          //由于fileList是所有的文件包含之前已上传过的，这里需要做区分（带response的即为新上传的）
          fileList.map(item => {
            if (item.response?.data) {
              item.id = item.response.data
            }
            if (item.id.id) {
              item.id = item.id.id
            }
            item.response && this.fileList.push({ originalName: item.name, id: item.id, tag: this.data ? this.data.tag : '',size:item.size });
          })
          this.uploading = false;
        }
        this.$emit('input', this.fileList)
      } else {
        this.uploading = false;
        this.$message.error(info)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传${this.limit}个文件`);
    },
    // 删除文件
    deleteFile(index, successFile) {
      // if (successFile.tag == '工程竣工图') {
      //   console.log(successFile, '/');
      //   delImage(successFile.id).then((res) => { })
      // } else {
      //   delFile(successFile.id).then((res) => { })
      // }
      this.fileList.splice(index, 1)
      this.$emit('input', this.fileList)
    },
    // 下载模板
    downloadTemp() {
      this.$emit('downloadTemp')
    }
  }
}
</script>
<style lang="less" scoped>
// .up-btn {
//   span {
//     line-height: 16px !important;
//   }

//   .up_ico {
//     vertical-align: middle;
//     margin-right: 3px;
//     // content: url('~@/assets/img/up_ico_white.png') !important;
//   }
// }
.addUpload {
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 3px;
  border-radius: 2px;
  border: 1px solid #003478;
  color: #003478;
  border-color: #003478;
  i {
    font-weight: 900;
  }
}
.tag {
  display: inline-block;
  max-width: 140px;
  vertical-align: middle;
  line-height: 18px;
  margin-right: 3px;
}
.uploadFileItem {
  height: 27px;
  width: 250px;
  background: #f6f8fc;
  border-radius: 2px;
  margin: 0 0 3px 5px;
  padding: 0 0 0 5px;

  .el-icon-s-order {
    transform: translateY(-6px);
    font-size: 18px;
    color: #346ffe;
    margin-right: 5px;
  }
  .formFile {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }
  .icon-download {
    margin-left: 5px;
    transform: translateY(-11px);
    &:hover {
      cursor: pointer;
    }
  }
}
</style>

引用组件 

     <Upload v-model="form.fileList" :data="{ projectId: projectId, tag: '成交通知书' }" acceptTip="请上传word或pdf版本的文件" :accept="'.docx,.doc,.pdf'" :limit="1"></Upload>