前端文件上传和下载功能的实现
文章目录
- 文件下载
-
- 利用a链接下载文件
- 使用window.open()
- 如果项目需要通过header鉴权,要设置header什么的
- axios 文件下载
- 文件上传
-
- 利用input标签 设置 type="file"
文件下载
利用a链接下载文件
let aLink = document.createElement('a')
aLink.href = `xxxx下载地址`// 设置下载的图片链接
aLink.click()// 触发点击事件
**
使用window.open()
**
window.location对象获取当前页面的地址信息，如果项目上线地址肯定不可以写死吧
window.open(
window.location.origin +
'xxxxxxxxxx' +
params,
'_self'
)
如果项目需要通过header鉴权,要设置header什么的
var xhr = new XMLHttpRequest();
let url = 'xxxxx'
xhr.open("get", url, true);
//加请求头
let userId = JSON.parse(getStore('user')).userId
xhr.setRequestHeader("user",userId);
xhr.responseType = "blob"; // 返回类型blob blob 存储着大量的二进制数据
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
reader.onload = function (e) {
var a = document.createElement("a"); // 转换完成，创建一个a标签用于下载
a.download = 'xxx';//名字
a.href = e.target.result;
a.click();
};
}
};
xhr.send(); // 发送ajax请求
base64 blob
base64是二进制数据的一个编码格式，就像utf8一样的东西，他跟json一样，也是前后端交互能够相互识别的数据，他更多的是用来传递文件数据
文件的数据类型是blob
Blob对象
一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象可以看做是存放二进制数据的容器。
FileReader
使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容。
**
图片在后端的存储方式有哪些？
**
答：
一般来说，图片在后端的存储方式分为两种
（1）可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;
（2）将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.
对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式，我们前端需要将其二进制流交由 blob 对象处理，然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。
axios 文件下载
Header中的请求参数：Content-Type、Content-Dispositon
Content-Dispositon: 控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。
具体介绍：Content-Disposition - HTTP | MDN (mozilla.org)
Content-Type:使用Content-Type来表示具体请求or响应中的媒体类型信息
常见的媒体格式类型如下：
- text/html ： HTML格式
- application/octet-stream ： 二进制流数据（如常见的文件下载）
- multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
- text/xml: XML数据格式
…
例子： 后端返回的是一个文件，文件名为11.jpg
项目中一般会统一使用封装的axios进行请求，而且会存在一些校验，所以上面的方法其实不太合适
利用响应拦截，如果响应媒体类型为’application/octet-stream’ …,从dispotion中取出name,利用a链接进行下载。。
ins.interceptors.response.use(res => {
const data = res.data
if (res.config.url.includes('/download')) {
if (data.type === 'application/octet-stream' || data.type === 'text/xml' || data.type === 'text/plain') {
let disposition = decodeURI(res.headers['content-disposition'])
let name = disposition.split(';')[1]
let a = document.createElement('a')
a.download = name.match(/"(\S*)"/)[1]
a.href = window.URL.createObjectURL(data)
a.click()
}
}
})
async download () {
let res = await xxx接口({
参数
})
if (res.type === 'application/json') {
var reader = new FileReader()
reader.onload = e => {
let json = JSON.parse(e.target.result)
if (json.status_code === 1 && json.msg) {
this.$message({
type: 'error',
message: json.msg
})
}
}
reader.readAsText(res)
}
}
文件上传
利用input标签 设置 type=“file”
<input
type="file"
@change="changeFunction"
/>
data(){
return{
changeFunction: (event) => {
let file = event.target.files[0];
if (!file) return false;
let FileName = file.name;
...
//把上传的文件存到data里
this.$set(this.addFileForm, "file", file);
this.$set(this.addFileForm, "file_name_origin", file.name);
},
}
}