1.实时上传,接口返回url,返显图片地址预览。所需API: uni.uploadFile()、uni.chooseImage()。
2.统一上传,接口统一接受所需字段,图片本地地址预览。所需API: uni.chooseImage()。
一、实时上传
点击选择框 首先使用uni.chooseImage(),从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths;然后调取uni.uploadFile()
uni.chooseImage({ success: (chooseImageRes) => { // 获取的格式是数组,多选会同时返回,单选只返回一项 const tempFilePaths = chooseImageRes.tempFilePaths; // 若多选,需循环调用uni.uploadFile ,因微信小程序只支持单文件上传 uni.uploadFile({ url: '', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData: { 'user': 'test' // 上传附带参数 }, success: (uploadFileRes) => { // 根据接口具体返回格式 赋值具体对应url console.log(uploadFileRes.data); } }); }});
官方链接:uni.uploadFile
二、统一上传
点击选择框 首先使用uni.chooseImage(),从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths;然后本地赋值保存本地图片地址。
uni.chooseImage({ count: 6, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], //从相册选择 success: (chooseImageRes) => { // 获取的格式是数组,多选会同时返回,单选只返回一项 this.imgArr.push(chooseImageRes.tempFilePaths) } }); // 点击上传后循环调用uni.uploadFile ,因微信小程序只支持单文件上传 this.imgArr.forEach(ele => { ele.forEach(item => { uni.uploadFile({ url: '', //仅为示例,非真实的接口地址 filePath: item, name: 'file', formData: { 'user': 'test' // 上传附带参数 }, success: (uploadFileRes) => { // 根据接口具体返回格式 赋值具体对应url console.log(uploadFileRes.data); } }); }) })
官方链接:uni.chooseImage