uniapp多图上传、一次性上传多张图片
哈喽大家好,今后只分享思维方法,一来让大家思考,二来提升我自己的逻辑思维。js方法,选中文件图片,返回路径数组,然后遍历上传到服务器。用 uni-file-picker 组件, 文件选择上传。js方法this.uploadFile。3.遍历一个个执行上传。2.获取到文件路径。
·
哈喽大家好,今后只分享思维方法,一来让大家思考,二来提升我自己的逻辑思维。为了共同学习进步,
用 uni-file-picker 组件, 文件选择上传
<view class="image-box">
<uni-file-picker
title="最多选择9张图片"
fileMediatype="image"
file-extname="jpg,png"
mode="grid"
:auto-upload="true"
@select="select"
@success="success"
@fail="fail"
/>
</view>
js方法,选中文件图片,返回路径数组,然后遍历上传到服务器
// 获取上传状态
select(e){
uni.showToast({
title: '稍等',
icon: 'none'
});
let tempFilePaths = e.tempFilePaths;
for (var i = 0; i < tempFilePaths.length; i++) {
this.uploadFile(tempFilePaths[i])
}
},
js方法 this.uploadFile
uploadFile(tempFilePaths) {
let token = uni.getStorageSync('token');
// 图片上传
uni.uploadFile({
url: 'https://xxx.com/api/v1/worker/updateFile',
filePath: tempFilePaths,
name: 'file',
method: 'POST',
header: {
authorization: 'Bearer ' + token
},
success: (uploadFileRes) => {
// 提取图片url
const res = JSON.parse(uploadFileRes.data);
if (res.code == 200) {
this.form.picture.push(res.data); // 上传成功返回的业务数据
uni.showToast({
title: '上传成功',
icon: 'none'
})
}
}
});
},
总结:
1.选择文件图片,
2.获取到文件路径。
3.遍历一个个执行上传
更多推荐
已为社区贡献6条内容
所有评论(0)