前端开发文件上传两种形式

1、上传文件至文件服务器，让后获取文件内容进行业务逻辑判断（多用于表）

<div class="select-file">
  <vxe-button status="primary" content="上传附件" size="small" @click="getFile" :disabled="disabled1"
              v-if="!customOption.data.rptFile"></vxe-button>
  <div v-else>
    <el-tag closable :disable-transitions="true" @click="download" @close="clearFile()">
      {{customOption.data.rptFileName}}
    </el-tag>
    <el-tag @click="preview" style="margin-left: 5px" :disable-transitions="true">预览</el-tag>
  </div>
  <input type="file" class="uploadFile" ref="file" @change="uploadFile">
</div>

uploadFile () {
  let file = this.$refs.file.files[0]
  let fileName = file.name
  this.customOption.data.fileName = fileName
  let formData = new window.FormData()
  formData.append('multipartFile', file)
  upload(formData).then(res => {
    if (res.code === 200) {
      this.customOption.data.rptFile = res.data
      this.customOption.data.rptFileName = fileName
      return msg({
        type: 'success',
        message: res.msg,
        offset: 400,
        showClose: true,
      })
    }
  })
},

2、上传至本地，获取文件名和流，然后调用业务逻辑接口

<div class="select-file">
  <vxe-button status="text" :content="data.rptFileName" size="small" :disabled="true"
              ></vxe-button>
  <vxe-button status="primary" content="浏览" size="small" @click="getFile"
              v-if="!data.rptFile"></vxe-button>
  <input type="file" class="uploadFile" ref="file" @change="uploadFile">
</div>

// 上传附件
uploadFile () {
  let file = this.$refs.file.files[0]
  let fileName = file.name
  this.form.data.rptFile = file
  this.form.data.rptFileName = fileName
},

// 生成待办-保存
saveTodo () {
  this.resultContent = ''
  if (!this.form.data.rptFile) {
    return msg({
      message: '请选择上传文件',
      type: 'error',
      offset: 400,
      showClose: true,
    })
  }
  let formData = new window.FormData()
  formData.append('file', this.form.data.rptFile)
  formData.append('templateId', this.templateId)
  importTargetTemplate(formData).then(res => {
    if (res.code === 200) {
      this.$emit('update')
      msg({
        message: '批量更新别名成功',
        type: 'success',
        offset: 400,
        showClose: true,
      })
    }
    this.close()
  }).catch((res) => {
    if (res.status === -2) {
      this.resultContent = res.msg
      this.isShowResult = true
    }
  })
},