上传的组件:<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'
})
}
})
}
最后就大功告成啦!当然上传地址根据自己的来。