在 UniApp 中使用uni.chooseImage
API实现从相册选择图片上传,该方法可以指定图片的选择来源、数量和大小等属性。
1.上传图片
//获取焦点 上传文件
uploadFilePromise() {
const that = this
//从相册选择图片
uni.chooseImage({
count: 1, // 选择一张图片 不设置可以选多张
sizeType: ["original", "compressed"], // 可以选择原图或压缩图
sourceType: ["album"], // 从相册选择 不设置可以从相册选或者拍照上传
success(res) {
that.tempFilePaths = res.tempFiles
const formdata = res.tempFiles
//获取到图片路径
console.log(formdata, 'formdata')
formdata.forEach(item => {
//上传
uni.uploadFile({
url: VUE_APP_API + '/uploadFile', //环境变量 + 腾讯云上传服务的接口
filePath: item.path, //图片路径
name: 'file',
header: {
"Authorization": "" //请求头内容
},
success: (uploadFileRes) => {
console.log(uploadFileRes, 'uploadFileRes')
const responseData = JSON.parse(uploadFileRes.data)
//解析上传成功后的图片id
that.form.fileIds.push(responseData.data)
that.pathList.push(item.path)
}
});
})
}
});
},
2.图片预览
lookImg(index) {
console.log(index, "indexx")
uni.previewImage({
current: index,
urls: this.pathList, //图片路径
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
总结
通过上面的步骤可以实现在uniapp中从相册批量上传图片,并进行图片预览的功能
1.通过uni.chooseimage() 从相册上传图片
2.通过uni.uploadFile() 上传到服务器 获取id (如果页面需要增删改查 需要id)
3.使用uni.previewImage() 进行图片预览