本文整理了前端常用的下载文件以及上传文件的方法
例子均以vue
+element ui
+axios
为例,不使用el
封装好的上传组件,这里自行进行封装实现
以图片为例,文件上传可以省略预览图片功能
图片上传可以使用2种方式:文件流
和base64
;
上传
+预览
: <input type="file" id='imgBlob' @change='changeImgBlob' />
<el-image style="width: 100px; height: 100px" :src="imgBlobSrc"></el-image>
// data
imgBlobSrc: ""
// methods
changeImgBlob() {
let file = document.querySelector("#imgBlob");
/**
*图片预览
*更适合PC端,兼容ie7+,主要功能点是window.URL.createObjectURL
*/
var ua = navigator.userAgent.toLowerCase();
if (/msie/.test(ua)) {
this.imgBlobSrc = file.value;
} else {
this.imgBlobSrc = window.URL.createObjectURL(file.files[0]);
}
//上传后台
const fd = new FormData();
fd.append("files", file.files[0]);
fd.append("xxxx", 11111); //其他字段,根据实际情况来
axios({
url: "/yoorUrl", //URL,根据实际情况来
method: "post",
headers: { "Content-Type": "multipart/form-data" },
data: fd
});
}
浏览器network
查看img
元素查看src
,为blob
类型
上传
+预览
:<input type="file" id='imgBase' @change='changeImgBase' />
<el-image style="width: 100px; height: 100px" :src="imgBaseSrc"></el-image>
// data
imgBaseSrc : ""
// methods
changeImgBase() {
let that = this;
let file = document.querySelector("#imgBase");
/**
*图片预览
*更适合H5页面,兼容ie10+,图片base64显示,主要功能点是FileReader和readAsDataURL
*/
if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function (e) {
that.imgBaseSrc = e.target.result;
//上传后台
axios({
url: "/yoorUrl", //URL,根据实际情况来
method: "post",
data: {
files: that.imgBaseSrc
}
});
};
fr.readAsDataURL(file.files[0]);
}
}
浏览器network
查看
img
元素查看src
,为base64
类型
假设需要下载图片为url
,文件流
处理和这个一样
<el-image style="width: 100px; height: 100px" :src="downloadImgSrc"></el-image>
<el-button type="warning" round plain size="mini" @click='downloadImg'>点击下载</el-button>
responseType
为blob
//data
downloadImgSrc:'https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs'
//methods
downloadImg() {
axios({
url: this.downloadImgSrc, //URL,根据实际情况来
method: "get",
responseType: "blob"
}).then(function (response) {
const link = document.createElement("a");
let blob = new Blob([response.data], { type: response.data.type });
let url = URL.createObjectURL(blob);
link.href = url;
link.download = `实际需要的文件名.${response.data.type.split('/')[1]}`;
link.click();
document.body.removeChild(link);
});
}
<el-image style="width: 100px; height: 100px" :src="downloadImgSrc"></el-image>
<el-button type="warning" round plain size="mini" @click='downloadImg'>点击下载</el-button>
responseType
为blob
//data
downloadImgSrc:'https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs'
//methods
downloadImg() {
axios({
url: this.downloadImgSrc, //URL,根据实际情况来
method: "get",
responseType: "blob"
}).then(function (response) {
const link = document.createElement("a");
let blob = new Blob([response.data], { type: response.data.type });
let url = URL.createObjectURL(blob);
link.href = url;
link.download = `实际需要的文件名.${response.data.type.split('/')[1]}`;
link.click();
document.body.removeChild(link);
});
}
图片上传可以使用2种方式文件流
和Base64
图片下载同理。
更多问题欢迎加入前端交流群交流749539640
接口和类型别名非常相似,在大多情况下二者可以互换。在写TS的时候,想必大家都...
recorder.js microphone基于HTML5的录音功能,输出格式为mp3文件。 前言 完全依...
先来看一下效果,这在CSS3之前,完全是不可想象的,只有图片才能做的到,但在HTM...
在经典配色中,可能每个人都不会否认黑白灰的永恒魅力。虽然人们总是想outstandi...
一、少用偏门。 类似break-word断行,z-index手动分层,还有像垂直对齐等等这些...
1.什么是母校?就是那个你一天骂他八遍却不许别人骂的地方。 2.拍毕业照三秒的...
前言 当页面的html结构嵌套的盒子很多的时候,可能会导致一个页面中含有多个垂直...
简介 Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框...
png透明 AlphaImageLoader filter:progid:DXImageTransform.Microsoft.AlphaImag...
如上图,padding值是复合属性按照顺时针(上右下做)顺序,其中padding的内边距影响...