文件上传处理

 <fks-upload
            :show-download="true"
            class="upload"
            :disabled="form.operate == 'view'"  //是否禁用
            :before-upload="beforeUpload"   // 上传文件之前,一般做格式校验
            :on-success="handleSuccess"    //上传成功，一般是保存token用于像后端请求；fileList赋值给file-list属性回显
            :before-remove="beforeRemove" // 移除文件之前,提示是否移除
            :on-remove="handleRemove"  //移除的时候，fileList赋值给file-list属性用于置空，拿到token调用删除文件的接口
            :on-preview="handlePreview"  //点击文件列表中已上传的文件时的钩子，用于预览
            :on-download="handleDownload"  //用于下载
            multiple   //是否支持多选文件
            :file-list="fileList"  //上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
            :action="uploadUrl"   //必选参数，上传的地址
            :with-credentials="true"  //支持发送 cookie 凭证信息
            :headers="{ 'Fawkes-Auth': ACESS_TOKEN }"   //携带token,这里是凤翎组件为例
          >
            <div style="display: flex; align-items: center; gap: 15px">
              <fks-button icon="fks-icon-upload2">上传</fks-button>
              <div slot="tip" class="fks-upload__tip">
                支持doc、jpg、png、pdf、rar、zip、ppt等格式；单个文件不大于10M
              </div>
            </div>
          </fks-upload>

1.上传之前的钩子（部分校验）

    //上传文件之前
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      // 图片格式
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/png 格式!");
        return false;
      }
    },

1.1文件类型
文本：
.xls格式：application/vnd.ms-excel
.xlsx格式：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.doc格式：application/msword
.docx格式：application/vnd.openxmlformats-officedocument.wordprocessingml.document
.txt格式：text/plain
.pdf格式：application/pdf
.ppt格式：application/vnd.ms-powerpoint
.zip格式：application/zip
.rar格式：application/x-rar
————————————————
视频：
.mp4格式：video/mp4
.m3u8格式：application/x-mpegURL
.mov格式：video/x-ms-wmv
.avi格式：video/x-msvideo
.flv格式：video/x-flv
.wmv格式：video/x-ms-wmv
————————————————
音频：
.mp3格式：audio/mpeg
————————————————
图片：
.jpeg格式：image/jpeg
.png格式： image/png
.gif格式： image/gif
————————————————

2.上传成功的钩子

    handleSuccess(res, file, fileList) {
      //文件上传完成前不可提交表单
      this.loading = false;
      this.fileTokenList.push(file.response.data.fileToken);
      this.fileList = fileList;
    },

3.移除之前（一般是提示）

    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

4.移除的时候（将空的fileList赋值，调用文件删除接口）

    handleRemove(file, fileList) {
      this.fileList = fileList;
      deleteFile({
        f8s: [file.fileToken],
      }).then((res) => {
        if (res.status) {
          this.$message.success("移除成功");
        }
      });
    },

5.点击文件列表中已上传的文件时的钩子

    handlePreview(file) {
      this.file = file;    //-----将文件传给用于回显的组件
      this.dialogVisible = true;  //打开那个回显组件
    },

5.1预览那里也可以通过filetoken拼接字符串的方式

    getSrc(fileToken) {
      let url = process.env.VUE_APP_BASE_API + "/路径";
      return url + `?f8s=${fileToken}`;
    },

6.文件下载（此处包报下载接口以及文件流的处理方法）

    handleDownload(file) {
      downloadFile(file.fileToken).then((res) => {     //调用下载方法，获取文件流
        download(file, res.data);    //将下载到的文件流进行处理
      });
    },





------------------------------------------------------------------------------------------------------------
//根据fileToken下载文件接口
export function downloadFile (f8s) {
  return request({
    url: '路径',
    method: 'GET',
    params: {
      f8s
    },
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    timeout: 0,
    responseType: "blob"
  })
}
------------------------------------------------------------------------------------------------------------------------------------
//常用文本（处理下载的文件流）
export const download = (file, blobs) => {
  let blob = new File([blobs], { type: "application/octet-stream" });
  if ("download" in document.createElement("a")) {
    const downloadElement = document.createElement("a");
    let href = "";
    if (window.URL) {
      href = window.URL.createObjectURL(blob);
    } else {
      href = window.webkitURL.createObjectURL(blob);
    }
    downloadElement.href = href;
    downloadElement.download = file.fileName || file.name;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    if (window.URL) {
      window.URL.revokeObjectURL(href);
    } else {
      window.webkitURL.revokeObjectURL(href);
    }
    document.body.removeChild(downloadElement);
    URL.revokeObjectURL(href); //释放 Blob
  } else {
    navigator.msSaveBlob(blob, file.fileName || file.name);
  }
  return;
};

//excel（处理表格方法）
export function exportFile(response) {
  const blob = new Blob([response.data], {
    type: response.headers["content-type"],
  }); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
  const desprsitions = response.headers["content-disposition"].split(";");
  let filename = "";
  for (let i = 0; i < desprsitions.length; i++) {
    if (desprsitions[i].indexOf("filename") > -1) {
      const filenames = desprsitions[i].split("=");
      if (filenames.length > 1) {
        filename = decodeURI(filenames[1].trim());
      }
    }
  }
  if ("download" in document.createElement("a")) {
    const downloadElement = document.createElement("a");
    let href = "";
    if (window.URL) {
      href = window.URL.createObjectURL(blob);
    } else {
      href = window.webkitURL.createObjectURL(blob);
    }
    downloadElement.href = href;
    downloadElement.download = filename;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    if (window.URL) {
      window.URL.revokeObjectURL(href);
    } else {
      window.webkitURL.revokeObjectURL(href);
    }
    document.body.removeChild(downloadElement);
  } else {
    navigator.msSaveBlob(blob, filename);
  }
}