本人第一次写uniapp,使用了uniapp的外部组件,uni-ui组件库,因为有多张图片上传需求,就使用了里面的图片上传组件uni-file-licker,我使用了以后前端页面可以显示出我所上传的图片,但是我不知道该如何去处理存值以及正确的向后台发起请求,相关文档并没有详细介绍该部分,网络搜索相关问题也大多是原生的上传方法并不能解决我的问题,所以在此发帖请求帮忙解决,如果有该组件使用实例最好不过。
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
/>
<script>
export default {
data() {
return {
imageValue: []
}
},
methods: {
// 获取上传状态
async select(e) {
console.log('选择文件:', e)
await this.uploadImg(res.tempFilePaths, 1);
},
async uploadImg(tempFilePaths, token) {
console.log(token)
if (!tempFilePaths.length) return;
const path = tempFilePaths.pop();
this.filePathsList.push({
url: path,
name: ""
})
const [err, {
data
}] = await uni.uploadFile({
url: 'https://localhost/file/api/uploadtemp',
filePath: path,
name: 'file',
header: {
Authorization: token,
"Content-Type": "multipart/form-data",
}
});
console.log("err", err)
console.log("data", data)
if (!this.isGuid(data)) {
// upload fail
this.filePathsList.pop()
uni.showToast({
title: "上传失败",
icon: "none"
})
} else {
// upload success
this.filePathsList[this.filePathsList.length - 1].name = data
}
this.uploadImg(tempFilePaths, token);
},
// 获取上传进度
progress(e) {
console.log('上传进度:', e)
},
// 上传成功
success(e) {
console.log('上传成功')
},
// 上传失败
fail(e) {
console.log('上传失败:', e)
}
}
}
</script>
要支持自动上传吗,如果不需要,可以把自动上传删掉,然后用@select方法,用request方法上传
参考官方文档,文档应该有Demo的,不清楚就慢慢测试。