vant拍摄视频上传以及多张图片上传

数据定义

data() {return {fileList: [],vedioList: [],formData: '',fileTypes: 'image/png,image/jpeg,image/jpg,image/jpeg',}
},
beforeMount() {this.formData = new FormData()
},

拍摄视频上传

<van-uploaderv-if="radio === '1'"v-model="vedioList"accept="video/*":max-count="1":max-size="52428800"capture="camera":after-read="(file, detail) => uploadAfterReadFnVedio(file, detail, '现场视频')":before-delete="(e, $event) => { uploaderBeforeDeleteVedio(e, $event) }">
</van-uploader>

拍摄视频上传事件

uploadAfterReadFnVedio(file, { index }, name) {this.formData.set('files', file.file)file.status = 'uploading'file.message = '上传中...'// 此时可以自行将文件上传至服务器UploadVideo(this.formData).then((res) => {this.vedioList.push({ url: res.data[0], key: res.data[0], name: name })this.vedioList.splice(index, 1)}).catch((_) => {// eslint-disable-next-line no-param-reassignfile.status = 'failed'// eslint-disable-next-line no-param-reassignfile.message = '上传失败'})
},

选择多张图片上传

<van-uploaderv-model="fileList":accept="fileTypes"multiple:max-size="5242880":max-count="6":after-read="(file, detail) => uploadAfterReadFn(file, detail, reqSubmitSBSJSBGZ.ListPic, '现场图片')":before-delete="(e, $event) => { uploaderBeforeDelete(e, $event, reqSubmitSBSJSBGZ.ListPic) }">
</van-uploader>

多张图片上传事件

uploadAfterReadFn(file, { index }, list, name) {const types = this.fileTypes.split(',')// 判断是一张还是多张图片if (Array.isArray(file)) {file.forEach(item => {if (!types.find((v) => v === item.file.type)) {this.$toast({type: 'fail',message: '请上传正确的图片',className: 'noticeWidth'})}if (item.file.size <= 5 * 1024 * 1024) {this.$toast({type: 'fail',message: '上传文件超过5M',className: 'noticeWidth'})}this.formData.set('files', item.file)// eslint-disable-next-line no-param-reassignitem.status = 'uploading'// eslint-disable-next-line no-param-reassignitem.message = '上传中...'// 此时可以自行将文件上传至服务器UploadFile(this.formData).then((res) => {this.fileList.push({ url: item.content, isImage: true, key: res.data[0] })this.fileList.splice(index, 1)list.push({ url: res.data[0], isImage: true, key: res.data[0] })}).catch((_) => {// eslint-disable-next-line no-param-reassignitem.status = 'failed'// eslint-disable-next-line no-param-reassignitem.message = '上传失败'})})} else {if (!types.find((v) => v === file.file.type)) {this.$toast({type: 'fail',message: '请上传正确的图片',className: 'noticeWidth'})return false}if (file.file.size > 5 * 1024 * 1024) {this.$toast({type: 'fail',message: '上传文件超过5M',className: 'noticeWidth'})return false}this.formData.set('files', file.file)// eslint-disable-next-line no-param-reassignfile.status = 'uploading'// eslint-disable-next-line no-param-reassignfile.message = '上传中...'// 此时可以自行将文件上传至服务器UploadFile(this.formData).then((res) => {this.fileList.push({ url: file.content, isImage: true, key: res.data[0] })this.fileList.splice(index, 1)list.splice(index, 1, {url: res.data[0],value: res.data[0],key: name})// eslint-disable-next-line no-param-reassignlist = [...list]}).catch((_) => {// eslint-disable-next-line no-param-reassignfile.status = 'failed'// eslint-disable-next-line no-param-reassignfile.message = '上传失败'})}
},

toast样式

<style>
.noticeWidth{min-width: 150px !important;line-height: 34px;font-size: 24px;
}
</style>