vue项目实现上传类型转base64,base64转file,下载file文件

文件转base64:

//在utils文件夹下新建imgTobase64.js文件
export const imgTobase64 = (file) => {
  return new Promise(function (resolve, reject) {
    let reader = new FileReader();
    let imgResult = "";
    reader.readAsDataURL(file);
    reader.onload = function () {
      imgResult = reader.result;
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.onloadend = function () {
      resolve(imgResult);
    };
  });
}
//使用方法
import { imgTobase64 } from "@/utils/imgTobase64";//页面引入
  imgTobase64("上传的文件file").then((res) => {
    console.log(res)
  });

base64转file:

//在utils文件夹下新建base64ToFile.js文件
export const base64ToFile = (urlData, fileName,type) => {
    let mime = type.match(/:(.*?);/)[1];
    let bytes = atob(urlData); // 解码base64
    let n = bytes.length
    let ia = new Uint8Array(n);
    while (n--) {
        ia[n] = bytes.charCodeAt(n);
    }
    return new File([ia], fileName, { type: mime });
}
//使用方法
import { base64ToFile } from "@/utils/base64ToFile";//页面引入
let blob = base64ToFile(
    "文件base64",
    "pdf",//文件类型
     "data:application/pdf;base64,"//文件头部信息
   );

下载file文件:

//在utils文件夹下新建downloadFile.js文件
export const downloadFile = (url, fileName) => {
    const a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("download", fileName);
    a.setAttribute("target", "_blank");
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);
    a.dispatchEvent(clickEvent);
}
//使用方法
import { downloadFile } from "@/utils/downloadFile";//页面引入
//配合上面base64转file使用
const url = URL.createObjectURL(blob);
downloadFile(url, "下载的文件名称");