vue项目中vant上传多张图片校验与压缩上传图片

最新推荐文章于 2024-06-13 09:08:02 发布

记忆深处的声音

最新推荐文章于 2024-06-13 09:08:02 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_67254840/article/details/129372697

文章介绍了如何在Vue项目中利用image-conversion插件实现图片压缩功能，以适应服务器对上传图片大小的限制。在beforeRead函数中，对图片格式和大小进行校验，并进行压缩，确保上传的图片是File对象。该方法有助于减少服务器资源消耗。

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

上传图片校验与压缩上传图片

分享一个有关利用vue如何实现一个将图片压缩并上传功能，

在开发中，项目常常有需要上传图片功能，但我们无法决定用户上传图片的大小，上传到服务器的图片太大会导致服务器承受不了，那么我们就只能把用户上传的图片，故而前端传图片的时候将图片压缩后再传到服务器，减少资源的消耗。

1、安装插件

npm i image-conversion --save
复制代码

2、在使用中的组件中引入

import * as imageConversion from 'image-conversion'
复制代码

3、结合自己所用组件使用

    // html
    <van-field class="fieldAuto" label="身份证附件(正、反面)">
      <template #input>
        <van-uploader @oversize="onOversize" :max-size="7000 * 1024" :before-read="beforeRead"
              :after-read="afterRead" @delete="addDelete" accept="image/*" :max-count="2" v-model="fileList1"
              style="object-fit: contain" />
      </template>
    </van-field>
    // js
    //校验图片的格式
    beforeRead(file) {
      let This = this
      // Array.isArray 是用来校验你是单张图片还是数组的形象做校验
      // 这是多张图片上传
      if (Array.isArray(file)) {
        file.forEach(item => {
          if (!item.type.startsWith('image')) {
            This.$toast("请上传图片！")
            return false
          } else if (item.size > 10485760) {
            This.$toast("图片超过10M！")
            return false
          }
        })
      } else {
      // 这是单张图片校验
        if (!file.type.startsWith('image')) {
          This.$toast("请上传图片！")
          return false
        }
        if (file.size > 10485760) {
          This.$toast("图片超过10M！")
          return false
        }
      }
      // 上传之前校验
      return new Promise((resolve, reject) => {
        // console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        // 500是控制压缩大小的 根据你自己的需要调整 数值越小压缩越小
        imageConversion.compressAccurately(file, 500).then(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对象