u-upload如何多图上传返回回调用于提交表单

原创已于 2023-12-29 17:33:02 修改 · 877 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #前端

于 2023-12-29 17:28:50 首次发布

文章描述了如何在Vue项目中使用u-upload组件进行文件上传，包括设置上传地址、请求头、上传成功回调和文件数量限制。同时介绍了如何处理文件选择、上传状态以及最终的提交操作。

上传的组件：<u-upload @on-list-change="onListChange" :fileList="fileList" @delete="deletePic" name="files" :auto-upload="true"
multiple :header="getAuthorizationHeader()" :action="dynamicAction" @on-success="onSuccess" max-count="9">
</u-upload>

注：这里的dynamicAction是上传地址，getAuthorizationHeader是请求头，onSuccess上传成功函数，原先的@after那个已经弃用了，最大限制max-count="9"，这里最多可以设置为99张图片，:auto-upload="true"自动上传方法，onListChange当内部文件列表被加入文件、移除文件，或手动调用clear方法时触发。

表单按钮：<button class="sub-suggestion" @click="subOpinion">提交</button>

export default {
data() {
return {
selectCategory: 0,
describe: '',
fileList: [],
imageList:[],
photoNum:'',
dynamicAction: config.baseUrl + 'File/LeaveRecordFile',
appenDix: '',
baseUrl: config.baseUrl
}
},
methods: {
handleSelectCategory(category) {
if (this.selectCategory === category) {
this.selectCategory = 0; // 取消选中
} else {
this.selectCategory = category; // 更新选中的分类
}
console.log(this.selectCategory);
},
getAuthorizationHeader() {
const token = uni.getStorageSync('token');
return {
Authorization: `Bearer ${token}`,
};
},
onListChange(lists,name) {
this.photoNum = lists.length
},
onSuccess(data, index, lists, name) {
let url = data.data.url
this.imageList.push(url)
this.appenDix =JSON.stringify(this.imageList)
},
subOpinion() {
const submissionData = {
suggestedContent: this.describe,
category: this.selectCategory,
annex: this.appenDix
}
apiAddOpinion(submissionData).then(res => {
console.log(res.message)
if (res.code === 0) {
uni.redirectTo({
url: '/pages/other/opinion/opinion'
})
}
})
}

最后就大功告成啦！当然上传地址根据自己的来。
————————————————
版权声明：本文为优快云博主「m0_72714828」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/m0_72714828/article/details/135295358