上传图片校验与压缩上传图片
分享一个有关利用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对象