图片允许多张上传,在使用file.status时总是不生效,直接跳转到成功状态,后来尝试加入了定时器;同时多张上传时采用判断数组的方式
<van-uploader accept="*" v-model="fileList" multiple :max-count="4" :after-read="afterRead" :before-read="beforeRead" />在下方使用时:
// 图片上传后回调 beforeRead(file) { if (!file.type.startsWith('image') && !file.type.startsWith('video')) { Toast.fail('请上传图片或视频') return false } else if (file.size > 104857600) { Toast.fail('选择上传内容不能超过100M') return false } else { return true } }, setUpload(file) { let that = this setTimeout(() => { let config = { headers: { //添加请求头 'Content-Type': 'multipart/form-data', }, } let deviceFile = [] let params = new FormData() if (Array.isArray(file)) { //因为该组件单选是对象,多选是数组 deviceFile = file console.log(deviceFile, 'deviceFile') } else { deviceFile.push(file) } deviceFile.map((item) => { //files是后台参数name字段对应值 params.append('file', item.file) }) // 文件上传状态 Toast('文件正在上传请等候,请收到上传成功提示后再关闭页面!') //添加上传状态,避免用户在上传未完成时点击提交按钮 this.isLoading = false // params.append('file', file.file) this.$http({ // 这里填写的是上传接口的内容 }) .then((res) => { if (res.data.code == 0) { Toast.success('上传成功!') // 文件成功状态 if (Array.isArray(file)) { file.forEach((item) => { item.status = 'done' item.message = '上传成功' }) } else { file.status = 'done' file.message = '上传成功' }this.isLoading = true } res.data.data.map((item) => { that.fileid.push(item.fileid) }) }) .catch() file.status = '' file.message = '' }, 1000) }, afterRead(file) { // 文件上传状态 if (Array.isArray(file)) { file.forEach((item) => { item.status = 'uploading' item.message = '上传中...' this.setUpload(file) }) } else { file.status = 'uploading' file.message = '上传中...' this.setUpload(file) } },