formData 实现文件上传或导入

html部分： 结合input标签

<div class="panel-btn btn-box">
	<el-button
	    class="audit-btn"
        size="mini"
        :loading="importLoading">导 入
    </el-button>
    <input
        class="import-input-file"
        :disabled="!manipulationFrom.zoneType"
        @change="e => {importData(e)}"
        accept="*.zip"
        type="file"
        name="file"></input>
    </div>

css部分： 隐藏input标签，自定义按钮样式

	.btn-box {
          position: relative;

          .import-input-file {
            opacity: 0;
            position: absolute;
            top: -1px;
            left: -1px;
            width: 70px;
            height: 33px;
            font-size:0;
            cursor: pointer;
          }
        }

js部分

//导入数据
    importData(e){
      const files = Array.from(e.target.files)
      if (files && files.length) {
        files.forEach(file => {
          const testmsg = /^.+(\.zip)$/.test(file.name);
          if (!testmsg) {
            this.$message.warning("只能上传zip文件!");
            return false;
          }
          this.importLoading = true
          let formData = new FormData();
          formData.append('file', file);
          formData.append('forestBaseId', this.curBase.id);
          formData.append('zoneType', this.manipulationFrom.zoneType);
          //调用导入接口
          importSideFile(formData).then(res => {
              if(res && res.status === 200){
                this.$message.success('导入成功')
              }
              this.importLoading = false
            })
        });
      }
    }