vant-uploader多附件上传

van-uploader上传组件遇到的问题

问题一：部分安卓机只有相机和录音选项，没有相册选项。

解决：accept=“image/*”

问题二：移动端上组件只能上传图片，没有文件管理选项，不能上传其他文件类型（pdf, docx等）

解决：accept=“” // 不限制上传的文件类型

 <van-uploader:disabled="disabledimg"style="width: 100%"preview-size="100":after-read="afterReadSQ"v-model="fileList"multiple:max-count="12":max-size="10000 * 1024"@oversize="onOversize":before-delete="beforedelete"accept=""><el-button :loading="loading" size="small" type="primary">上传附件</el-button></van-uploader>

:before-read=“beforeRead” 可以把这个属性去掉 或者在里面判断 上传的文本类型

代码

数据disabledimg: false,filelist: [], 方法// beforeRead(file) {// console.log('file111', file)// if (file.length) {// console.log('1')// file.forEach(item => {// console.log('2', item)// if (item.type === 'image/jpeg' || item.type === 'image/png' || item.type === 'image/jpg') {// return true// } else {// Toast('请上传 jpg/png/ 格式图片')// return false// }// })// return true// } else {// if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg') {// return true// } else {// Toast('请上传 jpg/png/ 格式图片')// return false// }// }// },onConfirm(value) {console.log('vvvv', value)this.value = value.textthis.showPicker = false},deleteimg(file) {// console.log('deleteimg', file)// console.log('fileList', this.fileList)// this.fileList = []// this.filelist = []// this.imgidlist = []},beforedelete(file, index) {if (this.disabledimg) {return false} else {console.log('删除', file, index)this.imgidlist.splice(index.index, 1)this.filelist.splice(index.index, 1)// this.fileList.splice(index, 1)console.log('this.imgidlist', this.imgidlist)return true}},// 员工诉求 上传图片/文件afterReadSQ(file) {console.log(file, '====after-read')// returnthis.disabledimg = truethis.filelist.push(file)console.log('获取图片信息', this.filelist)console.log('ff', file)if (file.length) {file.forEach(element => {element.status = 'uploading'element.message = '上传中...'})} else {file.status = 'uploading'file.message = '上传中...'}const FormDatas = new FormData()// FormDatas.append('file', file.file)if (this.filelist.length > 1) {if (this.filelist[1].length) {console.log('0111')this.filelist[1].forEach(item => {console.log('01111', item)FormDatas.append('file', item.file)})} else {console.log('0222')this.filelist.forEach(item => {FormDatas.append('file', item.file)})}} else {if (this.filelist[0].length) {// 多个上传console.log('111')this.filelist[0].forEach(item => {console.log('1111', item)item.file.status = 'uploading'item.file.message = '上传中...'FormDatas.append('file', item.file)})} else {console.log('222')this.filelist.forEach(item => {FormDatas.append('file', item.file)})}}// console.log(FormDatas.get('file'))//return// 上传图片workerOrderFtpReturnUrl(FormDatas).then(res => {// debuggerif (res.code == '000000') {if (file.length) {file.forEach(element => {element.status = 'done'element.message = '上传成功'})} else {this.imgidlist = []file.status = 'done'file.message = '上传成功'}console.log('获取图片data', res.data)file.status = 'done'file.message = '上传成功'res.data.forEach(element => {this.imgidlist.push(element.fileUrl)})this.disabledimg = false// console.log('imgidlist99999999999999999999', this.imgidlist)} else {this.disabledimg = falseToast(res.mesg)if (file.length) {file.forEach(element => {element.status = 'failed'element.message = '上传失败'})} else {file.status = 'failed'file.message = '上传失败'}// file.status = 'failed'// file.message = '上传失败'}}).catch(err => {this.disabledimg = falseToast('上传失败')file.status = 'failed'file.message = '上传失败'})// setTimeout(() => {// file.status = 'failed'// file.message = '上传失败'// }, 1000)},