vue3手动上传文件到服务器且下载文件(文件流)至本地

手动上传

1.在使用element ui进行上传时，需要先给定action地址，然后关闭自动上传

:action="http://xxx:8080/"//给地址
:auto-upload="false" //关闭自动上传

2.通过触发on-change属性，拿到上传文件的信息(前提：我们的接口需要将文件参数传到后台)，同时创建foemdata，将上传文件的raw追加进formdata

3.此时上传文件会被添加到文件队列，触发点击事件，进行提交【重点：需要子在接口写请求头，否则传过去的中文文件名字会乱码】

手动下载

下载文件时会有两种情况：1.后端给具体地址，前端进行拼接，就可以下载 2.后端给的是文件流

这里主要是文件流的方法(思路)：

a.添加响应头，以便转化文件流格式(文件流转化为对象)【不写的话，下载后的文件可能打不开】

responseType:'arraybuffer'

b.获取要下载的文件信息

c.设置formdata，将转化后的文件的data转成Blob型，再将formdata转化地址

d.添加a标签以及a标签的属性，将地址给a标签的href以及将获取文件名字将名字a标签的download

e.将a标签追加进页面的子节点并处触发点击事件再移除节点

downloadFile(filename.value).then((res) =>{
    console.log(res);
    downloadfilename.value = res.config.params.filename
    let fileupdata = new Blob([res.data],{type:'application/octet-stream;charset=UTF-8'});
    downloadfileurl.value = URL.createObjectURL(fileupdata)
    const link = document.createElement('a')
    link.setAttribute('href', downloadfileurl.value)// 设置属性值
    link.style.visibility = 'hidden'
    link.download = downloadfilename.value // 给下载的文件命名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    console.log(fileupdata);
})