使用 vant 上传压缩图片的方法

最新推荐文章于 2024-11-11 08:34:38 发布

原创最新推荐文章于 2024-11-11 08:34:38 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

45 篇文章

订阅专栏

vant

8 篇文章

订阅专栏

本文介绍如何使用Vant上传组件的afterRead方法进行图片压缩处理。通过判断图片大小，超过1MB时采用Canvas进行压缩，调整尺寸并设置压缩质量。同时提供了将base64转换为File对象的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里的 afterRead 方法是vant上传自带方法，

见文档 https://youzan.github.io/vant/#/zh-CN/uploader

afterRead(file) {
    this.$toast.loading("识别中");
    //判断图片的大小，单位是字节 
    if (file.file.size > 1048576) {
        console.log('压缩执行')
        let canvas = document.createElement('canvas') // 创建Canvas对象(画布)
        let context = canvas.getContext('2d')
        let img = new Image()
        img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
        img.onload = () => {
            canvas.width = 400
            canvas.height = 300
            context.drawImage(img, 0, 0, 400, 300)
            file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量
            let files = this.dataURLtoFile(file.content, file.file.name)

        }
    } else {
        // 符合大小的，直接上传
        this.fileImgid(file.file)
    }
},

将base64转换为file文件与上面的方法搭配使用。

// 将base64转换为file文件
				dataURLtoFile(dataurl, filename) {
					let arr = dataurl.split(',')
					let mime = arr[0].match(/:(.*?);/)[1]
					let bstr = atob(arr[1])
					let n = bstr.length
					let u8arr = new Uint8Array(n)
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n)
					}
					return new File([u8arr], filename, {
						type: mime
					})
				},

附带 html，可以不使用实例，vant的文档中写的很详细

<van-uploader :after-read="afterRead" capture="camera" class="uploader"/>