前端有关文件上传下载操作

文件上传

文件上传有两种形式（传给后端的文件形式）

• 变成blob通过formData搭载传输（二进制blob传输）
• 转为base64直接传输(简便，但是后端需要解码，时间长)，通过fileReader搭载

相关对象：

files（blob的一个子类）：通过input标签读取过来的文件对象（属于前端的方法，没办法直接传给后端）

blob:不可变的二进制内容，包含很多操作方法（new Blob([file]) 直接将file放进去可以得到一个Blob对象）

formData:用于和后端传输的对象，可以用来搭载blob对象来将文件传输给后端，用于和后端传输的对象

fileReader:多用于把文件(二进制)读取转化为某种形式，如文本text，base64，然后可以直接把base64的文件传给后端(看后端传递数据需求)，或者自己前端需要把一些文件转为base64格式

单文件上传

let imgurl=ref("")

function f1(e){
  //获取到file对象
  let file=e.target.files[0]
  // 限制文件大小
  if(file.size>10000000){
    alert("文件不能大于100kb")
    e.target.value=""
    return;
  }
  // 限制文件后缀名
  let name=file.name.split(".")[1]
  if(name!=="dll"){
    alert("文件类型必须是dll")
    e.target.value=""
    return
  }
  // 新建formData对象
  let form=new FormData()
  // 通过append方法加入文件
  form.append("file",file)
  //form作为数据传给后端就可以了
  axios.post("/xx",form)

  // 新建fileReader
  let fileReader=new FileReader()
  fileReader.readAsDataURL(file)//读成base64形式
  // 当文件读取完成后执行
  fileReader.onload=function(){
    imgurl.value=fileReader.result//读取后的结果
    // 如果上传的文件是图片，这个读取后的结果可以赋值给img里的src，可以在页面中展示缩略图
    axios.post("/xx",{base64:fileReader.result})
  }
}

多文件上传（循环的单文件上传，拿到每一个文件）

给input框加个属性multiple（需要用户在弹出的选择文件里按住ctrl键选择多个文件，用户不好操作），

所以这里需要定义一个数组，存放每次选择文件时，将选择的文件保存下来，让用户多次选择文件添加

let imgArr=reactive([])
let base64Arr=reactive([])


提交
function f2(e){
  // 存储多个文件
  let fileList=e.target.files
  for(let i=0;i{
    form.append(file.name,file)
  })
  axios.post("/xx",form)
}

大文件切片和断点续传

通过slice方法将大文件进行切片=>记录当前切到哪一位=>后端拼接切片

slice方法是blob对象的方法，但是file对象是blob对象的子类

两个参数——切分的起点和终点

let file=e.target.files[0]

let _sli=file.slice(0,10000) （ 这个切片是一个blob对象格式)

let per=ref('')
function f3(e){
  let file=e.target.files[0];
  let fileSize=file.size//文件大小
  let current=0;//记录当前切到哪一位
  let size=2*1024*1024//设置每次切片大小为2M
  
  // 判断本地有没有保存上传进度(也就是断点续传，将上次上传的进度保存下来)
  let localPer=parseInt(localStorage.getItem(file.name))
  // 如果有，就将当前current改为本地保存的开始进度
  if(localPer){
    current=localPer
  }
  
  // 如果当前切点位小于文件总大小，就一直切片进行上传
  // 当当前切点大于文件大小，说明上传完毕
  while(currrent

文件下载

后端直接以二进制的形式将文件传过来

文件下载有三种方式

直接打开下载地址

直接通过后端地址就能直接下载（无法命名，只适用于get直接返回blob接口）

window.open("/xx/xx")

利用a标签的download(推荐)

需要先了解几个概念

• createObjectURL——把blob对象的内存地址，以url形式给出（因为接口传递的数据是二进制形式，通过blob去接收传过来的二进制文件，这里就可以把blob对象给到createObjectURL，然后以url形式给出，然后这个url就可以通过a标签去加载）

let res1 = await downloadPro({ path: res.data.url })
            .then((response: any) => {
              let blob = new Blob([response], { type: "application/zip" });
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement("a"); // 创建a标签
              link.href = url;
              // link.download = "文件名.zip"; // 重命名文件
              link.click();
              URL.revokeObjectURL(url); // 释放内存
              ElMessage.success("下载成功！");
            })
            .catch((error: any) => {});

• msSaveBlob——IE不支持a标签下载，用的是msSaveBlob方案（如果浏览器是IE,直接把blob给msSaveBlob,直接下载）

• a标签的download属性——表明该a标签的行为是下载，并说明文件名

流程 ：

首先要按blob请求接口；

有msSavaBlob的情况下直接用msSavaBlob下载；

没有msSavaBlob的情况下，需要创建文件本地url（createObjectURL）=>创建a标签=>将创建的url赋值给a标签的href=>设置download下载的文件名=>模拟点击a标签；

// 直接调用接口获取到的是二进制形式文件，需要将响应类型设置为blob形式
axios.get('/xx/xx',{responseType:"blob"}).then((res)=>{
  // 判断有没有msSaveBlob,有就代表是一个IE浏览器
  if(window.navigator.msSaveBlob){
    window.navigator.msSaveBlob(res.data,
    {type:"文件类型"},
    "test.ppt"
                              )
  }else{
    // 创建出一个本地url地址
    URL.createObjectURL(res.data)
    // 创建标签
    let link=document.createElement("a")
    // 设置href
    link.href=blobURL
    // 设置下载下来的文件名
    link.download="test.ppt"
    // 设置不显示
    link.style.display="none"
    // 模拟点击
    link.click()
    // 销毁创建的url
    URL.revokeObjectURL(blobURL)
  }
})

file-saver现有的库，简单方便

import {saveAs} from 'file-saver'

axios.get("/xx/xx",{responseType:"blob"}).then((res)=>{

saveAs(res.data,"filename.ppt")

})