借助el-upload实现文件上传

需求效果：

<el-dialog title="上传割接记录" :visible.sync="dialogVisible" width="50%">
      <el-form inline class="app-form">
        <el-row class="row-2" style="text-align:center;">
          <el-form-item label="割接操作记录">
            <el-input v-model="fileForm.operfile" readonly></el-input>
          </el-form-item>
          <el-form-item prop="operfile">
            <el-upload
              class="upload-demo"
              ref="uploadBox"
              action="#"
              name="operfile"
              :on-change="operFile"
              :auto-upload="false"
              :limit="1"
              :on-exceed="() => $message.warning('一次只能上传1个文件!')"
            >
              <el-button
                slot="trigger"
                icon="el-icon-document-add"
                type="primary"
                >浏览</el-button
              >
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row class="row-2" style="text-align:center;">
          <el-form-item label="业务验证">
            <el-input v-model="fileForm.checkfile" readonly></el-input>
          </el-form-item>
          <el-form-item prop="checkfile">
            <el-upload
              class="upload-demo"
              ref="uploadBox2"
              action="#"
              name="checkfile"
              :on-change="checkFile"
              :auto-upload="false"
              :limit="1"
              :on-exceed="() => $message.warning('一次只能上传1个文件!')"
            >
              <el-button
                slot="trigger"
                icon="el-icon-document-add"
                type="primary"
                >浏览</el-button
              >
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row class="row-2" style="text-align:center;">
          <el-form-item>
            <el-button type="primary" @click="submitHandle">确认</el-button>
            <el-button @click="closeDialog">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

  data() {
    return {
      dialogVisible: false,
      fileForm: {
        taskid: '', // 任务ID	taskid
        opertype: '', // 操作类型	opertype
        operfile: '', // 操作记录路径
        checkfile: '', // 校验记录路径
      },
      fileList: [],
    }
  },

 

  methods: {

    // 取消&&完成&&上传操作文件页面的确认
    getoperroottask(form) {
      this.$utils
        .doRequest('cno/res/tacacsroot/operroottask', form, 'post')
        .then(res => {
          if (res.code == '0000') {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },

    operFile(file) {
        console.log(file);
      /**
       * 可以在选取文件后直接拿到 file对象进行存储
       * 不能直接push 要始终保证 fileList 是两个对象，因此，需要进行判断
       */

      let checkFileExte = ['xls', 'xlsx'].includes(file.name.split('.')[1])
      // 直接返回，但是 upload 组件下的list 会有提示，需要做处理
      if (!checkFileExte)
        return (
          this.$message.warning('上传文件只能是xls、xlsx格式！'),
          this.$refs.uploadBox.clearFiles()
        )

      if (this.fileList.find(file => file.type === 'operFile'))
        // 替换
        this.fileList[
          this.fileList.findIndex(file => file.type === 'operFile')
        ] = { file: file.raw, type: 'operFile' }
      else this.fileList.push({ file: file.raw, type: 'operFile' })
      this.fileForm.operfile = file.name
    },

    checkFile(file) {
      /**
       * 可以在选取文件后直接拿到 file对象进行存储
       * 不能直接push 要始终保证 fileList 是两个对象，因此，需要进行判断
       */

      let checkFileExte = ['xls', 'xlsx'].includes(file.name.split('.')[1])
      // 直接返回，但是 upload 组件下的list 会有提示，需要做处理
      if (!checkFileExte)
        return (
          this.$message.warning('上传文件只能是xls、xlsx格式！'),
          this.$refs.uploadBox2.clearFiles()
        )

      if (this.fileList.find(file => file.type === 'checkFile'))
        //    替换
        this.fileList[
          this.fileList.findIndex(file => file.type === 'checkFile')
        ] = { file: file.raw, type: 'checkFile' }
      else this.fileList.push({ file: file.raw, type: 'checkFile' })
      this.fileForm.checkfile = file.name
    },

    // 确认按钮点击事件
    submitHandle() {
      if (this.fileForm.checkfile === '' || this.fileForm.operfile === '') {
        this.$message({
          message: '请选择要上传的文件',
          duration: 3000,
          type: 'warning',
        })
      } else {
        /**
         * fielList 就是也要上传的文件列表，直接调用接口即可，不需要使用upload submit 方法
         * formData 尽量不要存储
         * 接下来就是创建formData 进行文件传输
         */

        let formData = new FormData()
        // 添加到 formData type 是选取文件时给的文件标记，也是上传的文件标记
        this.fileList.forEach(file => formData.append(file.type, file.file))
        // 调用接口欧
        this.getoperroottask(formData)
        this.closeDialog()
      }
    },

    closeDialog() {
      this.dialogVisible = false
      this.fileForm.checkfile = ''
      this.fileForm.operfile = ''
      this.$refs.uploadBox.clearFiles()
      this.$refs.uploadBox2.clearFiles()
    },
  },