携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

一、上传返回的是完整的线上连接

1-1.html

<div class="max-cell">
    <span>其他附件</span>
    <el-upload
      disabled
      class="upload-demo"
      :action="action"
      :on-preview="handlePreview"
      :on-remove="handleRemove2"
      :on-success="onSuccess2"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList2"
    >
      <i class="el-icon-upload icon"></i>
    </el-upload>
</div>


// limit为上传数量限制

// 初始变量
        action: window.urlConfig.srmurl + 'environment/zbsqwh/zb/sq/FilUploadOne',
        fileList2:[],
        fileListSave2:[] // 上传后取值传参
        
// 回显时给fileList2赋值
        
        if (this.form.qtfjid&&this.form.qtfjid.length>0) {
            this.fileListSave2 = this.form.qtfjid
            this.form.qtfjid.map(itemUrl=>{
              const arr = itemUrl.split('/')
              this.fileList2.push({
                url: itemUrl,
                name: arr[arr.length - 1],
              })
            })
          }
        
// 相关方法
      handlePreview(file) {
        let a = document.createElement('a')
        if(file.url){
          a.href = file.url
        }else{
          a.href = file.response.data
        }
        a.click()
      },
      handleRemove2(file, fileList) {
        this.fileListSave2 = []
        fileList.map(item=>{
          this.fileListSave2.push(item.url)
        })
        this.form.qtfjid = this.fileListSave2
      },
      onSuccess2(res) {
        // 其他附件
        if (res.code === 200) {
          this.$message.success(res.errormsg)
          this.fileListSave2.push(res.data)
          this.form.qtfjid = this.fileListSave2
        } else {
          this.$message.warning(res.errormsg)
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${
            files.length
            } 个文件，共选择了 ${files.length + fileList.length} 个文件`,
        )
      },
        

二、上传返回的是部分连接，对于下载文件时需对该链接进行拼装

一个封装的el-upload

upload.vue

<template>
  <div class="mes_datepicker_box" :style="{ width: width }">
    <div v-if="islabel" class="mes_label">{{ label }}</div>
    <el-upload
      ref="upload"
      :action="action"
      :headers="headers"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-change="onChange"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-progress="progress"
      :accept="accept"
      :data="data"
      :auto-upload="autload"
      :show-file-list="showlist"
      multiple
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <div class="button">{{ text }}</div>
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    action: {
      type: String,
      default: () => {
        return ''
      }
    },
    accept: {
      // 文件类型
      type: String,
      default: () => {
        return ''
      }
    },
    headers: {
      type: Object,
      default: () => {
        return {}
      }
    },
    autload: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    label: {
      type: String,
      default: '测试label'
    },
    showError: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 1
    },
    width: {
      type: String,
      default: 'calc(33.33% - 0px)'
    },
    islabel: {
      type: Boolean,
      default: true
    },
    showlist: {
      // 是否显示文件列表
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: () => {
        return '文件上传'
      }
    },
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {},
  methods: {
    sumbit() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      this.$emit('handleRemove', { file, fileList })
      // console.log(file, fileList)
    },
    handlePreview(file) {
      this.$emit('handlePreview', file)
      // console.log(file)
    },
    handleExceed(files, fileList) {
      this.$tips({
        content: `当前限制选择 1 个文件`,
        type: 'error'
      })
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    onChange(file, fileList) {
      this.$emit('change', file)
    },
    onSuccess(rep, file, fileList) {
      if (rep.code === 0 || rep.code === 200) {
        this.$emit('success', { rep, file, fileList })
      } else {
        if (this.showError) {
          this.$tips({ content: rep.msg, type: 'error' })
        }
      }
    },
    progress(rep, file, fileList) {
      this.$emit('progress', { rep, file, fileList })
    },
    beforeUpload(file) {
      this.$emit('before-upload', file)
    }
  }
}
</script>

<style>
.mes_datepicker_box {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
  /* width: calc(33.33% - 70px); */
}
.mes_datepicker {
  flex-grow: 1;
}
.mes_datepicker .el-input__inner {
  padding: 0px 32px;
  min-width: 120px;
  height: 28px;
  border: 1px solid #c4c6cf;
  border-radius: 3px;
  outline: 0px;
}
.mes_datepicker .el-input__icon {
  line-height: 28px;
}
.mes_datepicker .el-input .el-input__inner::placeholder {
  color: #2a2a2a;
}
.button {
  font-size: 12px;
  color: #ffffff;
  padding: 8px 16px;
  background: #1688f9;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 10px;
  max-width: 120px;
  text-align: center;
  height: 28rpx;
}
.mes_datepicker_box>div:nth-child(2){
  display: flex;
  align-items: center;
}
</style>

2-2.使用

      <mes-upload label="附件上传" :action="action" :show-error="false" :headers="headers" :file-list="fileList"
        @before-upload="beforeUpload" @success="uploadSuccess" @handlePreview="handlePreview" />

// 初始化变量
      action: urlConfig.base + 'mes/bm/test/FilUploadOne',
      headers: {},
      fileList: [],
      toError: true,
      
      
// 初始化      
    this.headers = { api_key: Cookies.get('api_key') }
    
    
    
// 附件回显
        if (this.form.fjmc !== '') {
          this.fileList.push({ name: this.form.fjmc, url: this.form.fj })
        }
        
        
        
// 相关方法

    // 上传
    beforeUpload(file) {
      this.toError = true
      // let nameList = ''
      // const typeList = []
      // this.selectList.forEach(item => {
      //   typeList.push(item.paramKey)
      //   nameList += item.paramKey + ','
      // })
      // var FileExt = file.name.replace(/.+\./, '').toUpperCase()
      // if (typeList.indexOf(FileExt) === -1) {
      //   this.$tips({
      //     type: 'error',
      //     content: '仅支持上传格式：' + nameList
      //   })
      //   this.toError = false
      //   return false
      // }
    },
    uploadSuccess({ rep, file }) {
      if (this.toError) {
        this.form.fjmc = file.name
        // this.form.fjmc = file.name.split('.')[0]
        this.form.fj = rep.data
      }
    },
    handlePreview(file) {
      // console.log('file',file)
      var fileurl = ''
      if (file.url.indexOf('http') >= 0) {
        fileurl = file.url
      } else {
        fileurl = urlConfig.base + file.url
      }
      // const fileurl = urlConfig.base + 'mes' + file.file.response.data
      const name = file.name
      const that = this
      $.ajax({
        headers: { api_key: Cookies.get('api_key') },
        url: fileurl,
        type: 'HEAD',
        success: function(res) {
          const aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = fileurl
          aLink.setAttribute('download', name)
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
        },
        error: function(e) {
          that.$tips({ content: '文件不存在', type: 'error' })
          return
        }
      })
    }