前端常用图片文件下载上传方法
SegmentFault
共 7367字,需浏览 15分钟
· 2021-04-29
作者:JenK
来源:SegmentFault 思否社区
本文整理了前端常用的下载文件以及上传文件的方法
例子均以vue+element ui+axios为例,不使用el封装好的上传组件,这里自行进行封装实现
先附上demo
上传文件
以图片为例,文件上传可以省略预览图片功能
图片上传可以使用2种方式:文件流
和base64
;
1.文件流上传
+预览
:
* <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
类型
2.Base64上传
+预览
:
<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);
});
}
文件下载(以pdf为例)
<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);
});
}
pdf预览可以参考如何预览以及下载pdf文件
小结
文件流
和Base64
图片下载同理。
评论
【第127期】推荐常用的国内外AI大模型
概述 多个国内外的AI大模型及其特点。以下是一些被提及的AI大模型和平台:全球大模型:ChatGPT:由OpenAI开发,支持多种语言,包括中文。Claude:由Anthropic开发,擅长深层次语言模式和复杂推理。Gemini:由Google Research开发,擅长自然语言理解和生成。Mis
前端微服务
0
前端框架新势力大盘点
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群近年来,前端领域快速发展,新的框架不断涌现,为开发者提供了更多选择和解决方案。尽管 React、Vue、Angular、Next.js、Preact 等老牌框架依然稳坐市场主流,但新势力前端框架的崛起也为特定场景带来了更佳的适配和优
前端Q
0
分享几个前端中好玩且有用的开源工具,总有一个适合你!
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。Spring Boot整合Minio后,前端的文件上传有两种方式:1、文件上传到后端,由后端保存到Minio这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、
Java架构师社区
0
超赞!这个ChatGPT提问教程,PDF免费下载
你好,我是郭震AI来袭,我们该如何学习?今天先分享给大家一份超好的GPT提问指南。教程的详细介绍参考下面视频:这个PDF资料旨在教我们更好的给GPT发送指令,让GPT更准确的回答我们的提问。一共有30页,内容包括7个小章节,按照逻辑展开。分别介绍文本回答,代码辅助,结构化结果输出,非结构化结构输出,
Python与算法社区
3
.NET 开源工具库,集成超过1000个扩展方法
前言推荐一个.NET 开源项目,集成了超过1000个扩展方法。项目简介Z.ExtensionMethods是由zzzprojects公司开发并维护的一款开源库,为.NET开发人员提供一系列实用的扩展方法,可以减少重复劳动、提高开发效率,支持.NET Framework 和 .NET Core。该项目
dotNET全栈开发
10
5G RedCap贯通行动政策文件发布,这些关键词值得关注
作者:赵小飞物联网智库 原创近日,工信部发布了《关于开展2024年度5G轻量化(RedCap)贯通行动的通知》,从标准、网络、芯片模组、终端、应用、安全、保障7大方面采取具体措施,并给出明确目标,在政策层面对5G RedCap进一步发展提供保障。RedCap承担着5G物联网连接数增长的重要任务,但同
物联网智库
0
python读取一个文件里面几百个csv数据集然后按照列名合并一个数据集
点击上方“Python爬虫与数据挖掘”,进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤但使龙城飞将在,不教胡马度阴山。大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【FiNε_】问了一个Python自动化办公,问题如下:python 读取一个文
Python爬虫与数据挖掘
3