uniapp uview 上传图片,数据以formData + File 形式传输

期望

后端期望前端给的传参为 formData 形式, 同时文件的数据类型为File 形式.

解决过程

将文件处理为 File 格式

uview 中的 upload 组件点击上传之后不是标准的 File 形式,点击上传单个文件之后的控制台信息如下:

复制代码
[
    {
        "url": "blob:http://localhost:8081/c16e50ca-767b-4de1-93b4-0446656c3e4d",
        "progress": 0,
        "error": false,
        "file": {
            "name": "440k.jpg",
            "lastModified": 1658970439074,
            "lastModifiedDate": {},
            "webkitRelativePath": "",
            "size": 449462,
            "type": "image/jpeg"
        }
    }
]

故需对 file 内容进行二次加工. 将生成的 blob url 地址处理成 File 文件流形式.

代码如下:

复制代码
// 上传图片回调
onChooseOne(lists) {
	console.log(lists)
	// 将获取到的信息放入上传列表中
	this.pushFileList('fileListOne', lists)
},
// 公共添加文件信息
async pushFileList(fileList, info) {
	this[fileList] = []
	info.forEach(async item => {
		// 加载blob文件
		const imgBlob = await fetch(item.url).then(r => r.blob())
		// 循环生成file文件流
		this[fileList].push({
			url: item.url,
			info: new File([imgBlob], item.file.name, {
				type: item.file.type
			})
		})
	})
},

最后处理完成之后形式如下:

这时要传输的信息已经准备好

将数据其处理成 formData 形式
复制代码
// 将数据处理成formData形式
addForm(params) {
	// 将json数据处理为form格式
	let newFile = new FormData();
	let keys = Object.keys(params);
	let values = Object.values(params);
	values.forEach((item, index) => {
		if (typeof item === 'object' && item) {
			item.forEach((item1) => {
			newFile.append(`${keys[index]}`, item1);
		});
		} else {
			newFile.append(`${keys[index]}`, item);
		}
	});
	return newFile;
},

同时需要更改 api 请求方式. 因为 uniapp 的 uni.request 默认不支持 formData 形式数据, 官网文档如下:

所以我们退而求其次, 直接安装 axios 后, 直接使用 axios 进行请求. 我们需要为请求头增加 formData 请求类型, 最后封装后的 api 请求如下:

复制代码
const url = 'xxx你的请求地址'
const config = {
	headers:{
	'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryXkII0NmP1jsvIgZC'
	}
};
return new Promise((resolve, reject) => {
	axios.post(url, data, config)
		.then((res) => {
			resolve(res)
		})
		.catch((err) => {
			reject(err)
		})
})

结果

最后处理之后的请求数据为表单数据, 接口对接完毕:

相关推荐
空灵之海1 小时前
Ubuntu系统安全合规配置
linux·ubuntu·系统安全·1024程序员节
小天呐1 天前
qiankun 微前端接入实战
前端·js·微前端
阿啄debugIT2 天前
装饰(Decorator)模式可以在不修改对象外观和功能的情况下添加或者删除对象功能
软件工程·1024程序员节
—Qeyser4 天前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
脑子慢且灵7 天前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
迪迦7 天前
基于uni-app的校园综合服务平台开发实战
前端·javascript·开源·uniapp
上单带刀不带妹9 天前
Node.js 的流(Stream)是什么?有哪些类型?
node.js·stream·js
丁同亚的博客10 天前
echarts大屏项目指南
echarts·可视化·js·web前端·大屏
vanezkw11 天前
UniApp自定义Android基座原理及流程
uniapp·基座
乔公子搬砖14 天前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定