uniapp——上传图片获取到file对象而非临时地址——基础积累

最近在看uniapp的代码,遇到一个需求,就是要实现上传图片的功能
uniapp 官网地址:https://uniapp.dcloud.net.cn/

上传图片有对应的API:
uni.chooseImage方法:https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage

此方法可以通过【从本地相册选择图片或使用相机拍照】来获取图片的临时地址:

接口返回的参数有:【tempFilePaths】和【tempFiles】两个

现在需要将【tempFiles】中的【file】对象上传到后端提供的接口。

然后通过uni.unploadFile将临时地址上传到网络获取网络地址。

但是如果后端不支持临时地址进行上传,仅支持file文档流。

但是经过测试,uni.request是不支持formdata格式的。

所以我这边最后的处理方法,是通过fetch进行传递,完整代码如下:

js 复制代码
uni.chooseImage({
	count: 1, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: (res) => {
		let file = res.tempFiles[0];
		var formData = new FormData();
		formData.append('image', file)
		var requestOptions = {
			method: 'post',
			headers: {
				Authentication: uni.getStorageSync('userToken')
			},
			body: formData,
		};
		fetch(
				`${this.$store.state.pathUrl}/member/update_img`,
				requestOptions
			)
			.then((response) => {
				return response.json();
			}).then(res => {
				console.log(res);
				if (res.code == '1000') {
					uni.showToast({
						title:res.message,
					})
				}else{
					uni.showToast({
						title:res.message,
						icon:'error'
					})
				}
			})
	}
})

完成!!!多多积累,多多收获!!!

相关推荐
进击的荆棘4 分钟前
C++起始之路——AVL树的实现
开发语言·数据结构·c++·stl·avl
郝学胜-神的一滴4 分钟前
[系统设计] 新鲜事系统:写扩散与读扩散的实现与对比
java·设计模式·php·软件构建·需求分析·软件设计·系统设计
进击的荆棘6 分钟前
C++起始之路——红黑树的实现
开发语言·数据结构·c++·stl·红黑树
W.A委员会9 小时前
JS原型链详解
开发语言·javascript·原型模式
止语Lab9 小时前
Go并发编程实战:Channel 还是 Mutex?一个场景驱动的选择框架
开发语言·后端·golang
她说彩礼65万9 小时前
C# 实现简单的日志打印
开发语言·javascript·c#
绿浪19849 小时前
c# 中结构体 的定义字符串字段(性能优化)
开发语言·c#
房开民10 小时前
可变参数模板
java·开发语言·算法
t***54410 小时前
如何在现代C++中更有效地应用这些模式
java·开发语言·c++
Victoria.a11 小时前
python基础语法
开发语言·python