vant自动上传图片/文件

• 2022 年 8 月 3 日
• 笔记
• Vant, VUE, Vue学习坎坷路, 移动端

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
},

文件读取之后

一般来说，前端在进行Post请求的时候会根据场景发送不同类型的数据，该Post请求头的Content-Type字段必须声明相应的数据类型，比如说application/x-www-form-urlencoded、application/json、multipart/form-data等，根据实际应用，有时候会需要请求时来手动设置，不过大部分情况下浏览器会根据Body中的数据来自发的设置相应的请求头。

afterRead(file, detail) {
    // 此时可以自行将文件上传至服务器
    console.log(file, detail)
    
    //发送请求
    let params = new FormData()
    params.append('file', file.file)
    params.append('size', file.file.size)
    
    api.submit(params)
        .then((res) => {
        this.$message.success('上传图片成功')
    })
        .catch((err) => {
        console.error(err)
    })
},

文件删除后

deleteFile(file, detail) {
    console.log(file,detail)
},