vue+elementui 上传文件

概要

两种方式：①利用el-upload直接上传文件 ②选择一个文件后，先不上传，等点击确定之后将file的二进制文件流一起提交

技术细节

第一种方式：

<el-upload :action="uploadData.url" :data="ploadData.params" :a***ept="uploadData.a***ept" :show-file-list="false" :on-su***ess="handleUploadSu***ess" :on-remove="handleFileMove">
     <el-button :icon="Upload" type="primary">上传数据</el-button>
 </el-upload>

// 参数
upload: {
   url: COFIGURL+ "/api/mdm/***mon/upLoadTableValueExcel",
   params: {
   	tableId: applyFormData.tableId
   },
   a***ept: ".xlsx,.xls"
}

// 方法
const handleUploadSu***ess = (res) => {
  const { msg } = res;
  if (res.code == "0") {
    ElMessage.su***ess(msg ? msg : "操作成功");
  } else {
    ElMessage.error(msg ? msg : "操作失败");
  }
}

第二种方式

<el-upload ref="myUpload" class="upload-demo" :multiple="false" :limit="1" :file-list="fileList" :auto-upload="false" :on-remove="handleRemove" :on-change="handleChange" a***ept=".xlsx,.xls">
  <template #trigger>
    <el-button type="primary" :icon="Upload">选择文件</el-button>
  </template>
  <template #tip>
    <div class="fc-red fs12">
      仅支持上传一个文件
    </div>
  </template>
</el-upload>

// 参数
var fileList = ref([]);

// 方法
const handleChange = async (file) => {
  fileList.value = [file.raw]; // file.raw 才是上传的文件
}
const handleRemove = () => {
  fileList.value = [];
}

// 调取后端接口确认上传
const handleUploadConfirm = async () => {
  if (fileList.value.length > 0) {
    const formData = new FormData();
    formData.append("file", fileList.value[0]);
    const result = await Api.importRiskExcel(queryData.value.secondLevelCode,formData);
    if (result) {
      ElMessage.su***ess("操作成功");
      getRiskListNew();
    }
  } else {
    ElMessage("请选择文件进行导入");
  }
}

需要注意的是：接口提交form对象时，需要将请求头设置为

headers: {
     "Content-Type": "multipart/form-data;charset=UTF-8",
},