最近在看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'
})
}
})
}
})
完成!!!多多积累,多多收获!!!