Problems encountered by van-uploader upload component
Question 1: Some Android phones only have camera and recording options, but no photo album options.
Solution: accept="image/*"
Problem 2: The component on the mobile terminal can only upload images, there is no file management option, and other file types (pdf, docx, etc.) cannot be uploaded.
Solution: accept="" // Does not limit uploaded file types
<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" You can remove this attribute or determine the uploaded text type in it
code
数据
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.text
this.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')
// return
this.disabledimg = true
this.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 => {
// debugger
if (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 = false
Toast(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 = false
Toast('上传失败')
file.status = 'failed'
file.message = '上传失败'
})
// setTimeout(() => {
// file.status = 'failed'
// file.message = '上传失败'
// }, 1000)
},