vant自动上传图片/文件
vant自动上传文件/图片
vant上传图片与elementUI有所不同,没有自动上传功能,所以与后端进行接口对接的时候可以在after-read中将文件进行上传
html页面
<!-- 上传图片 -->
<van-field name="uploadImg" label="图片">
<template #input>
<van-uploader
:max-count="5"
multiple
v-model="uploadImg"
:max-size="50 * 1024 * 1024"
@oversize="onOversize"
:before-read="beforeRead"
:after-read="afterRead"
@delete="deleteFile"
accept="image/jpeg,image/jpg,image/png"
upload-icon="photo"
>
</van-uploader>
</template>
</van-field>
max-count:最大上传个数
multiple:是否支持多选
:max-size:文件大小限制
@oversize:文件超出大小后的方法
:before-read:文件读取之前(可以做文件类型等校验)也可以进行文件大小判断
:after-read:文件读取之后(此时可以进行文件上传)
@delete:文件删除时的方法
accept:文件类型
upload-icon:显示的图标
文件超出大小时的方法
onOversize() {
this.$toast('图片大小不能超过 50Mb')
},
文件读取之前(用于判断类型)
beforeRead(file) {
if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png') {
this.$notify({ type: 'danger', message: '请上传 jpg、jpeg、png 格式图片' })
return false
}
return true
},
文件读取之后(通过接口上传图片)
afterRead(file, detail) {
// 此时可以自行将文件上传至服务器
file.status = 'uploading'
file.message = '上传中...'
console.log(file, detail)
//发送请求
let params = new FormData()
params.append('file', file.file)
params.append('size', file.file.size)
api.submit(params)
.then((res) => {
file.status = 'done'
file.message = '上传成功'
this.$message.success('上传图片成功')
})
.catch((err) => {
file.status = 'failed'
file.message = '上传失败'
console.error(err)
})
},
tips:一般来说,前端在进行Post请求的时候会根据场景发送不同类型的数据,该Post请求头的Content-Type字段必须声明相应的数据类型,比如说application/x-www-form-urlencoded、application/json、multipart/form-data等,根据实际应用,有时候会需要请求时来手动设置,不过大部分情况下浏览器会根据Body中的数据来自发的设置相应的请求头。
文件删除后
deleteFile(file, detail) {
console.log(file,detail)
},