vue 项目中上传图片 并压缩图片

有时候 我们不能去决定用户 上传图片的大小,那么我们就只能把用户上传的图片,压缩一下在传给后台,减少资源的消耗。

1.安装插件

npm i image-conversion --save

2.在使用的组件中引入

import * as imageConversion from 'image-conversion'

3.结合ui插件使用
// html
<van-uploader
            v-model="uploaderPositive"
            :after-read="afterRead"
            :before-read="beforeRead"
            :max-count="1"
   />
// js
beforeRead(file) {
      // 上传之前校验
      return new Promise((resolve, reject) => {
        // console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩,小于则不会
        imageConversion.compressAccurately(file, 100).then(res => { // console.log(res)
          res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
          // console.log('压缩后', res)
          resolve(res)
        })
      })
    }

beforeRead() 这个函数里边的数据才是最重要的 可以压缩用户上传的图片 压缩图片的大小 你可以自己定,还可以限制用户上传图片的格式

4.注意

beforeRead() beforeRead函数是自己定义的哦,函数里的代码就是进行图片的压缩,将传入的图片调用imageConversion内的方法,这里需要注意的是,压缩后返回的是blob对象,而Upload组件需要接收到File文件对象才会将压缩后的进行上传,否则不起作用,所以这里要对返回值处理成File对象

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容