ios 优化html表单提交,前端实现axios以表单方式上传文件，优化上传速度

最新推荐文章于 2024-04-12 04:36:16 发布

小刘庄主

最新推荐文章于 2024-04-12 04:36:16 发布

阅读量370

点赞数

文章标签： ios 优化html表单提交

本文介绍了如何在iOS应用中优化HTML表单文件上传，通过使用formData而不是base64转换，显著提高上传速度并减少带宽压力。详细讲述了实现方法，包括读取文件、实例化FormData和配置axios，以及在开发中遇到的请求参数为空和请求头添加`boundary`的问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在开发过程中，遇到的需要是需要上传高清图片，必须原图上传。由于在移动端应用，上传网络问题有很大的坑。当初的方案是直接采用将文件转化为 base64 ，再进行上传，由于文件转化为 base64 后，文件大小会增加30%。又导致上传压力，影响用户体验。最终采取了以 formData 形式进行上传，也就是 File 上传文件。以这种形式可以提高上传速度提高30%以上。下面会讲解开发过程及遇到的问题。

二、实现方法

1、读取文件

通过input标签，我们可以得到一个file文件将这个file进行处理。

// 选择本地图片

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)

}]

复制代码