前端通用方法

[toc]

---

前端上传文件到后端的通用方法

前端上传文件一般是通过创建一个**input type="file"**标签进行的.

==记得要在axios中设置header:{"Content-Type": "multipart/form-data"}==

• 首先,创建一个按钮,用来响应上传文件函数.

    <el-button type="primary" class="mr-2" @click="handleUploadFile">上传</el-button>

• 然后,我们在script标签中进行编写逻辑函数.

  //首先我们要创建一个input标签
  const fileInput: HTMLInputElement = document.createElement("input");
  // 设置input标签的type为file
  fileInput.type = "file";
  //设置可上传文件的后缀名
  fileInput.accept = ".xlsx,.xls";
  //可设置是否可以文件多选
  fileInput.multiple = true;
  /********/
  //上传函数
  const handleUploadFile = () => {
    //创建一个FormData,用来构建请求体.
    const formData = new FormData();
    //模拟点击input,用来选择文件
    fileInput.click();
    //选择文件后的逻辑
    fileInput.onchange = () => {
      //选中的文件
      const file = fileInput.files![0];
      //添加到formData里面,构建请求参数
      formData.append("file", file);
      //如果前面multiple设置为了多选,那么构建参数的时候需要如此构建:
      file.forEach(item=>formData.append("file",item));
      //还可以传入其他参数,(需要是字符串)
      formData.append("tableName", String(store.params.tableName));
      formData.append("version", "0");
      //进行请求
      request.post(uploadUrl, formData).then((res: any) => {
      	console.log(res);
        //上传成功后将原选中文件清空.
      	fileInput.value = "";
      });
    };
  };
  
  

前端下载文件的方法

下载文件的方法主要是:请求后端的接口,得到响应数据,主要是将后端返回的数据流转换成相应的文件,创建a标签进行下载:

==记得要在axios中设置responseType: 'blob'==

//请求接口之后得到res,对res进行操作,记得要进行responseType: 'blob'设置
downloadTable(params,{responseType:'blob'}).then((res)=>{
  //downloadAxiosResponse函数就是对res进行操作,output.xlsx为默认下载文件名.
  return downloadAxiosResponse(res, "output.xlsx");
})

export const downloadAxiosResponse = (res, name) => {
  //创建Blob格式数据
  const blob = new Blob([res.data]);
  //转换成可以下载的Url
  const url = URL.createObjectURL(blob);
  //创建a标签
  const link = document.createElement("a");
  // 解析文件名，在响应头的content-disposition字段中
  const disposition = res.headers.get("Content-Disposition");
  //其具体名字是什么格式需要输出一下disposition才能看出来
  const _name = disposition.split("filename*=utf-8''")[1] || "";
  //设置下载名字
  link.download = decodeURIComponent(_name) || name;
  //设置下载链接
  link.href = url;
  //点击进行下载
  link.click();
  //还有一步,需要将创建的a标签进行删除
  document.removeChild(link);
};

axios 并发请求取消

前端调用接口时，携带参数A响应很慢，然后我又调用了该接口，携带了参数B响应很快获得了结果展示在页面上，但是过了一会参数A的响应结果返回了，展示在了页面上，这不是我所预期的，应该怎么解决该问题.

import axios, { type Canceler } from "axios";
const CancelToken = axios.CancelToken;
//定义接口
const analysisList = (data, cancel) =>
  axios.post("/...", data, { cancelToken: new CancelToken((c) => (cancel.c = c))});

//定义实现
let cancel: { c: Canceler } = { c: () => {} };
const fetchData = async () => {
  //重复请求接口时取消接收上一个接口的响应
  cancel.c();
  const res = await analysisList(data,cancel);
  ...
}