自动上传
image-conversion NPM 地址
安装插件
npm i image-conversion --save
利用before-upload钩子函数，在上传之前用image-conversion插件的 compressAccurately 方法对图片进行压缩处理。
<!--单图上传组件/按钮-->
<template>
<el-upload
:action="uploadUrl"
name="avatar"
:multiple="false"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
with-credentials
>
</el-upload>
</template>
<script>
import { compress, compressAccurately } from 'image-conversion'
export default {
setup(props, { emit }) {
// ...省略其他
const beforeUpload = file => {
const typeList = ['image/jpeg', 'image/png', 'image/gif']
const isTypeValid = typeList.includes(file.type)
const isLt2M = file.size / 1024 / 1024 < 2
if (!isTypeValid) {
ElMessage.error('图片格式只能是 JPG/PNG/GIF!')
}
if (!isLt2M) {
ElMessage.error('图片大小不能超过 2MB!')
}
return new Promise((resolve, reject) => {
if (file.size / 1024 > 200) { // 大于 200 kb 就压缩
compressAccurately(file, 200).then(res => {
// The res in the promise is a compressed Blob type (which can be treated as a File type) file;
console.log(res)
resolve(res)
})
} else if (isTypeValid && isLt2M) {
// 无需压缩直接返回原文件
resolve(file)
} else {
reject()
}
})
}
return {
beforeUpload
}
}
}
</script>
手动上传
手动上传需将 el-upload 组件的auto-upload属性设置为 false，这样before-upload钩子便失效了。这时可以用on-change钩子函数代替：
因为有批量上传的情况，注意这个钩子是传了几个文件就触发几次的，我们也可以在提交表单时再去对图片文件进行压缩处理。
同时 image-conversion 是异步返回结果，无法接收，我们需要换一个方式，利用 canvas 画布对图片进行压缩：
其核心原理就是把一张大的图片，直接画在一张小小的画布上。此时大图片就变成了小图片，压缩就这么实现了。
canvas的drawImage API：CanvasRenderingContext2D.drawImage()
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
image：即需绘制到上下文的图片元素。允许任何的 canvas 图像源(CanvasImageSource)，可以是页面上获取的 DOM 对象，也可以是虚拟 DOM 中的图片对象 (我们的上传操作就是虚拟 DOM 对象，并没有真正绘制到页面上)。
dx, dy, dWidth, dHeight：
表示在 canvas 画布上规划处一片区域用来放置图片，dx, dy分别为目标 canvas元素的左上角X 、Y轴坐标坐标，dWidth, dHeight表示canvas元素上用于显示图片的区域大小，允许对绘制的 image 进行缩放。
如果没有指定sx,sy,sWidth,sHeight这4个参数，则图片会被拉伸或缩放在这片区域内。
实际操作很简单，比如需要把一张图片的尺寸缩放为400*200大小：
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200;
// 核心 js
ctx.drawImage(img, 0, 0, 400, 200)
那如何把 canvas 画布转换成 img 图像呢，canvas提供了2个转图片的方法：
-
canvas.toDataURL(type, quality)
API 地址：HTMLCanvasElement.toDataURL()
把图片转换成 base64 格式信息，纯字符的图片表示法。
-
type： 图片格式，默认image/png -
quality：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以在 0 到 1 的区间选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
-
toBlob(callback, type, quality)：
API 地址：HTMLCanvasElement.toBlob()
把 canvas 转换成 Blob文件，通常用在文件上传中，因为是二进制的，对后端更加友好。
-
callback：回调函数，转换好的Blob对象。如果图像未被成功创建，可能会获得null值。 -
type和quality：和toDataURL()的参数一致
和toDataURL()方法相比，toBlob()方法是异步的，因此多了个callback参数。异步意味着不可控性，那么如果我们需要的上传格式是Blob，可以通过先转成dataURL，再把dataURL转成Blob的处理方式。
现在来看看具体代码怎么实现“图片→canvas压缩→图片”这个过程：
简单整理下思路：
- 首先拿到图片资源，用 FileReader 去读取，读的过程中用
readAsDataURL方法把 File 转成dataURL（base64编码字符串） - 读取成功触发 reader 的 load 事件，此时把
dataURL赋值给创建的空new Image()的src - image 开始加载，触发 image 的 onload 事件，在此处进行压缩，再将压缩完的值返回过来。
- 具体压缩过程是用 canvas 在虚拟 DOM 中经过算法按比例绘制图片，然后
将绘制完的 canvas 转成 dataURL，再把 dataURL 转成 Blob - 接着把 Blob append 到 FormData 实例对象上（如有需要，可以在拿到到压缩完的Blob 结果后，再将其转换为 File）
下面把具体代码贴一下（省略无关部分）：
👇
封装的压缩方法js：
// `src/utils/compress.js`
export function dataURLToBlob(dataUrl) {
let arr = dataUrl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bytes = window.atob(arr[1]) // 去掉url的头，并转换为byte
var n = bytes.length
var u8arr = new Uint8Array(n)
while (n--) { // 将图像数据逐字节放入Uint8Array中
u8arr[n] = bytes.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
export const compress = (img, option, Orientation) => {
const options = option || {}
const { width, height, quality } = options
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let initSize = img.src.length
let w = width || img.width
let h = height || img.height
// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio
if ((ratio = (w * h) / 4000000) > 1) {
ratio = Math.sqrt(ratio)
w /= ratio
h /= ratio
} else {
ratio = 1
}
canvas.width = w
canvas.height = h
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, w, h)
// 瓦片canvas
const tCanvas = document.createElement('canvas')
const tctx = tCanvas.getContext('2d')
let count
if ((count = (w * h) / 1000000) > 1) {
// 如果图片像素大于100万则使用瓦片绘制
console.log('超过100W像素')
count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(w / count)
let nh = ~~(h / count)
tCanvas.width = nw
tCanvas.height = nh
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(
img,
i * nw * ratio,
j * nh * ratio,
nw * ratio,
nh * ratio,
0,
0,
nw,
nh
)
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
}
}
} else {
ctx.drawImage(img, 0, 0, w, h)
}
//修复 ios上传图片的时候 被旋转的问题
if (Orientation != '' && Orientation != 1) {
switch (Orientation) {
case 6: //需要顺时针（向左）90度旋转
rotateImg(img, 'left', canvas)
break
case 8: //需要逆时针（向右）90度旋转
rotateImg(img, 'right', canvas)
break
case 3: //需要180度旋转
rotateImg(img, 'right', canvas) //转两次
rotateImg(img, 'right', canvas)
}
}
// 进行最小压缩
// canvas.toDataURL(type, encoderOptions);
// type： 图片格式 image/png
// encoderOptions：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以在 0 到 1 的区间选择图片的质量。
// 如果超出取值范围，将会使用默认值 0.92。
let newImg = canvas.toDataURL('image/jpeg', quality || 0.3)
console.log('压缩前：' + initSize)
console.log('压缩后：' + newImg.length)
console.log('ndata:' + newImg)
console.log(
'压缩率：' + ~~((100 * (initSize - newImg.length)) / initSize) + '%'
)
// return new File([blob], file.name, { type: file.mime }) // 如果是返回 File
// 默认返回 Blob 格式，兼容性较好
// newImg = base64UrlToBlob(newImg)
newImg = dataURLToBlob(newImg)
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
return newImg
}
/** 图片压缩，默认为同比例压缩
* @param {file} 接受文件数组或单个文件(图片对象)
* @param {option} 指定压缩的配置参数， width｜ height｜ quality
* 回调函数 callback 参数为 base64 字符串图片数据数组
*/
export function compressFile(file, option, callback) {
const reader = new FileReader()
const image = new Image()
// 异步读取传入的 Blob 或 File 对象，【读取成功】会触发 reader 的 load 事件
reader.readAsDataURL(file)
// 读取到图片数据保存在 event.target 的 result属性中
reader.onload = function (event) {
// 数据格式是 data:URL字符串（base64编码）
image.src = event.target.result
}
return new Promise((resolve, reject) => {
image.onload = () => {
resolve(compress(image, option))
}
})
}
批量上传组件：
<!--批量上传组件-->
<template>
<el-upload
:action="`${apiUrl}/admin/upload`"
name="photoSrc"
with-credentials
:show-file-list="true"
:file-list="photoList"
:on-change="photoListChange"
:on-preview="handlePreview"
:on-remove="handleRemove"
:auto-upload="false"
:drag="drag"
multiple
:class="uploadClass"
>
<template v-if="!drag" #trigger>
<el-button size="small" type="primary">选取文件</el-button>
</template>
<template v-if="drag">
<i class="el-icon-upload" />
<div class="el-upload__text">
将图片拖到此处，<br />或<em>点击上传</em>
</div>
</template>
</el-upload>
</template>
<script lang="ts">
import { compressFile } from '@/utils/compress'
export default defineComponent({
name: 'UploadMulti',
setup(props) {
const photoList = ref([])
// 当文件列表有改变时触发，添加文件、上传成功和上传失败时都会被调用。
// 我们配置了手动上传，因此只有添加图片时触发
const photoListChange = (file: Object) => {
const typeList = ['image/jpeg', 'image/png', 'image/gif']
const isTypeValid = typeList.includes(file.raw.type)
const isLt2M = file.size / 1024 / 1024 < 2
if (!isTypeValid) return ElMessage.error('图片格式只能是 JPG/PNG/GIF!')
if (!isLt2M) return ElMessage.error('图片大小不能超过 2MB!')
// 压缩处理
compressFile(file.raw).then(res => {
const newFile = new File([res], file.name, { type: file.raw.type })
file.blobUrl = res
file.raw = Object.assign({}, newFile)
photoList.value.push(file)
})
// photoList.value.push(file)
}
// 传入 true 获取【已上传】文件，否则是获取【未上传】文件
// 用是否拥有 raw 属性 来判断，有 raw property 就是待上传的
const filterPhotoList = (isUploaded?: Boolean) => {
return isUploaded
? photoList.value.filter(
item => !Object.prototype.hasOwnProperty.call(item, 'raw')
)
: photoList.value.filter(item =>
Object.prototype.hasOwnProperty.call(item, 'raw')
)
}
// 表单提交时先触发这个方法用来获取文件列表，如有未上传的就在这时上传
const getUploadedList = async () => {
// 获取待上传的文件列表，如果没有就直接返回 photoList 的值
const toUploadList = filterPhotoList()
if (toUploadList.length === 0) return photoList.value
// 有则开始手动上传
const formData = new FormData()
// 压缩处理也可以考虑放这里
// for (let file of toUploadList) {
// const res = await compressFile(file)
// ...
// formData.append('photoSrc', file.blobUrl, file.name)
// }
toUploadList.forEach(file => {
// 如果是 Blob
formData.append('photoSrc', file.blobUrl, file.name)
// formData.append('photoSrc', file.raw, file.name)
})
// 执行上传，uploadMulti 是我的批量上传接口
const { data } = await uploadMulti(formData)
// 对返回的图片信息做些处理，再给表单去继续 Post
return filterPhotoList(true).concat(uploadMultiSuccess(data))
}
return {
photoList,
photoListChange,
filterPhotoList,
getUploadedList,
}
}
})
</script>
参考：
前端JS利用canvas的drawImage()对图片进行压缩
vue下实现input实现图片上传，压缩，拼接以及旋转
