内容简介:最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传。由于在移动端应用,上传网络问题有很大的坑。当初的方案是直接采用将文件转化为通过input标签,我们可以得到一个file文件将这个file进行处理。
最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传。由于在移动端应用,上传网络问题有很大的坑。当初的方案是直接采用将文件转化为 base64
,再进行上传,由于文件转化为 base64
后,文件大小会增加30%。又导致上传压力,影响用户体验。最终采取了以 formData
形式进行上传,也就是 File 上传文件。以这种形式可以提高上传速度提高30%以上。下面会讲解开发过程及遇到的问题。
二、实现方法
1、读取文件
通过input标签,我们可以得到一个file文件将这个file进行处理。
<input class="upload" type="file" ref="upload" accept="image/jpeg,image/jpg,image/png" @change="uploadImg($event)">
// 选择本地图片 uploadImg (e) { let file = e.target.files[0] } 复制代码
2、实例化FormData对象
因为我们是以表单的形式上传文件,所以必须进行实例化,再添加属性以及值。注意,这里必须进行实例化,否则无法上传。我们可以把 formdata
作为参数上传给后端。
uploadImg (e) { // 获取file let file = e.target.files[0] // 实例化 let formdata = new FormData() formdata.append('file', file) } 复制代码
3、配置axios
在axios配置中,我们需要用POST方法,再配置 headers
,需要这个浏览器才知道是表单。
headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' } 复制代码
uploadImg (e) { // 获取file let file = e.target.files[0] // 实例化 let formdata = new FormData() formdata.append('file', file) upload(formdata).then(res => { // ... }) } 复制代码
基本的步骤就以上3个,但是开发过程中会遇到一些不明觉厉的坑,下面总结一下。
三、问题
1、请求报文里面的请求参数为空
由于出现请求参数为空,我们无法发送给后端数据,无法保存成功。遇到这个可以检查一下你的axios请求拦截部分是否对数据进行了处理,我遇到是的axios请求拦截中,multipart/form-data时候,数据直接就被Qs进行序列化了,因为无法序列化FormData的内容,所以返回的data就是一个空的内容,导致最后判断是不是formData对象时出错。解决方法,如果 'Content-Type' === 'multipart/form-data;charset=UTF-8'
就是直接返回data,不进行序列化。
transformRequest: [function (data, headers) { if (headers['Content-Type'] === 'application/x-www-form-urlencoded') { // 把一个参数对象格式化为一个字符串 return qs.stringify(data) } else if (headers['Content-Type'] === 'multipart/form-data;charset=UTF-8') { return data } else { headers['Content-Type'] = 'application/json' } return JSON.stringify(data) }] 复制代码
2、为什么请求会加上```boundary````
请求报文中出现了这个 boundary
,按道理我们没有加上去,那怎么会增加这个东西呢。其实这个是浏览器自己加上去的。如果大家去看axios中源码,处理请求头部分,如下:
axios会自动的判断是否是以 formData
的形式上传,就将Content-Type删除,也就是删除掉了multipart/form-data这个请求头。因为这种形式需要浏览器自行设置才可以进行上传。
四、总结
这种方式上传相对比较简单,也可以减少带宽的压力,不过需要后端进行配置处理比较多,根据需求进行合理利用。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 表单正则验证及文件上传验证功能
- 纯原生Ajax2.0(不用FormData)实现表单及文件上传
- JFinal-layui v1.4.0 发布,表单上传按钮、优化图表统计、表格弹窗
- 表单 – 避免Symfony强制显示表单字段
- 细说 Angular 2+ 的表单(二):响应式表单
- 8款最新CSS3表单 环形表单很酷
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C Primer Plus
Stephen Prata、云巅工作室 / 云巅工作室 / 人民邮电出版社 / 2005-2-1 / 60.00元
《C Primer Plus(第5版)(中文版)》共17章。第1、2章学习C语言编程所需的预备知识。第3到15章介绍了C语言的相关知识,包括数据类型、格式化输入输出、运算符、表达式、流程控制语句、函数、数组和指针、字符串操作、内存管理、位操作等等,知识内容都针对C99标准;另外,第10章强化了对指针的讨论,第12章引入了动态内存分配的概念,这些内容更加适合读者的需求。第16章和第17章讨论了C预处......一起来看看 《C Primer Plus》 这本书的介绍吧!