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'
					})
				}
			})
	}
})

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

相关推荐
阿幸软件杂货间12 分钟前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
扯淡的闲人22 分钟前
多语言编码Agent解决方案(5)-IntelliJ插件实现
开发语言·python
丑小鸭是白天鹅32 分钟前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
sali-tec41 分钟前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
java搬砖工-苤-初心不变41 分钟前
基于 lua_shared_dict 的本地内存限流实现
开发语言·junit·lua
海绵宝宝不喜欢侬1 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106321 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq1 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
charlie1145141911 小时前
Kotlin 的 apply / with / run 详解
开发语言·kotlin·程序设计·面对对象