Vant-ui上传文件时，如果文件过大先压缩文件再上传

最新推荐文章于 2023-11-28 15:51:14 发布

原创最新推荐文章于 2023-11-28 15:51:14 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ui #js #javascript #前端 #vue.js

本文介绍了一种在前端实现图片上传前进行压缩的方法，通过使用image-conversion插件，设置文件大小限制，并在before-read事件中处理图片压缩。示例代码展示了如何配置van-uploader组件，限制图片大小不超过50MB，并使用async函数进行文件压缩，确保文件大小不超过5M。

1.先安装image-conversion插件

npm i image-conversion --save

2.设置文件限制大小，max-size以及设置组件api（before-read）


            
<van-uploader
    multiple
    :max-size = 'imgMaxSize'
    :before-read = 'beforeRead'
    accept = '.jpg,.jpeg,.png'
/>

multiple ==> 允许同时上传多张图片
imgMaxSize ==> 50 * 1024 *1024这里限制最大为50M

3.编写beforeRead方法进行文件压缩

import * as imageConversion from 'image-conversion';  //引入方法

async beforeRead(file) {
    //是否是多张上传
    if (Array.isArray(file)) {
        for await (let i of file) {
            new Promise((resolve, reject) => {
                return imageConversion.compressAccurately(i, 5 * 1024).then(res => {
                    //这里5 * 1024是把大于5M的文件压缩到5M
                    //此时返回的数据是Blob数据，如果后台没有处理，还需要转成File数据
                    res = new File([res], i.name);
                    resolve(res);
                })
            })
        }
    } else {
        return new Promise((resolve, reject) => {
            imageConversion.compressAccurately(file, 5 * 1024).then(res =>{
                res = new File([res], file.name);
                resolve(res);
            })
        })
    }
}