思路:
用户触发某一事件弹出一个弹窗(用户可能直接手机拍摄或者直接从手机相册选择照片),用户选择完方式后,调用对应的api并把选择好的照片上传到服务器。
涉及到的API:
1、uni.showActionSheet 从底部向上弹出操作菜单
2、uni.chooseImage 从本地相册选择图片或使用相机拍照
3、uni.uploadFile 将本地资源上传到开发者服务器
实现代码:
uni.showActionSheet({
itemList: ["拍照", "从手机相册选择"],
success(res) {
let sourceType = "camera";
if (res.tapIndex == 0) {
sourceType = "camera";
} else if (res.tapIndex == 1) {
sourceType = "album";
}
let that = this;
uni.chooseImage({
count: 6, //最多可以选择的图片张数,默认9
sizeType: ["original", "compressed"], //original 原图,compressed 压缩图,默认二者都有
sourceType: [sourceType], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
success: function(res) {
let tempFilePaths = res.tempFilePaths;
//考虑到选择多张图片上传的情况
for (let i = 0; i < tempFilePaths.length; i++) {
uni.uploadFile({
url:"xxx", //仅为示例,非真实的接口地址
filePath: tempFilePaths[i], //要上传文件资源的路径
name: "file", //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
formData: {
user: "test"
},
success: function(res) {
var data = res.data; //do something
data = JSON.parse(data);
},
fail: function(err) {
console.log(err);
}
});
}
}
});
}
});