vue + axios+vant 实现图片上传-----（压缩+旋转+上传）
最近在写一个移动端图片上传的功能，查阅了一些资料，记录一下我在实现上传图的时候，分三步一步步完善，先保证主功能‘上传’，然后再给它补充步骤分为三步：上传的实现压缩图片的实现（手机图片越来越大，手机上传，压缩已经刻不容缓）针对ios横屏的图片添加旋转功能（可有可没有，锦上添花的作用）上传的实现：我所有的接口请求统一用的axios，所以上传也沿用了axios。axios 我查阅资料，必须要用form表
·
最近在写一个移动端图片上传的功能，查阅了一些资料，记录一下
我在实现上传图的时候，分三步一步步完善，先保证主功能‘上传’，然后再给它补充
步骤分为三步：
- 上传的实现
- 压缩图片的实现（手机图片越来越大，手机上传，压缩已经刻不容缓）
- 针对ios横屏的图片添加旋转功能（可有可没有，锦上添花的作用）
上传的实现：
我所有的接口请求统一用的axios，所以上传也沿用了axios。axios 我查阅资料，必须要用form表单的形式才能上传成功，所以按照网上的示例new 了一个formData，模拟form表单。（我的接口写到了store里，所以是以下形式，只要看懂js 部分就可以了）
VUE（vant插件实现）
<van-uploader multiple
v-model="filemuList"
:before-read="beforeRead"
:after-read="onRead"
:max-count="3" >
</van-uploader>
import {imgPreview, dataURLtoFile} from '@/utils/upload'
//method 部分
methods(){
onRead (file) { // 上传图片
try{
file.status = 'uploading';
file.message = '上传中...';
let newFile=file;
if(file instanceof Array){ //如果多个图片同时上传
file.map((value,index)=>{
imgPreview(value.file, value, this.uploadImg); //文件流 ， 原文件，回调函数
})
}else{ //单个文件上传直接走这里 如果你没有用到multiple 只写这个分支就好了
//uploadImg() //如果不处理图片可以直接在这里调用上传接口
//处理图片走处理图片的方法，把上传方法作为回调函数传过去
imgPreview(file.file, file, this.uploadImg); //文件流 ， 原文件，回调函数用于调用接口上传
}
}catch(err){
console.log(err)
}
},
//这里写接口
async uploadImg(headerImage, oldFile) {
let newfile = dataURLtoFile(headerImage,oldFile);
let file = {
file: newfile
}
try {
let res = await this.$store.dispatch("uploadImageFile", file)
if(!res || res.status !=200 || !res.data){
oldFile.status = 'failed';
oldFile.message = '上传失败';
this.fileList.pop()
}
oldFile.url = this.defaultImgPre+res.data.msg
oldFile.status = 'success';
oldFile.message = '上传成功';
} catch (e) {
oldFile.status = 'failed';
oldFile.message = '上传失败';
this.fileList.pop()
console.log(e);
}
},
}
我所有的接口请求统一用的axios，所以上传也沿用了axios。axios 我查阅资料，必须要用form表单的形式才能上传成功，所以按照网上的示例new 了一个formData，模拟form表单。（我的接口写到了store里，所以是以下形式）
js上传接口实现
async uploadImageFile({ state, commit, dispatch, rootState }, payload) {
const param = new FormData(); //很重要，模拟form表单
param.append("file", payload.file); //将图片文件流放到参数里
const config = {
headers: { "Content-Type": "multipart/form-data" }
};
return await axios.post("你的上传图片的url", param, config)
}
写完以上代码，基本的上传功能已经实现了
upload.js 里主要是对图片的处理，压缩及旋转，这里统一提取出来放到工具的文件夹下边。
原资料是写到vue里了，如果结构上令你头疼，在本文的结尾附上原来的结构形式
upload.js
/**
* @description:
* @param nowtel
* Exif是用于图片旋转判断的 需要安装一下 yarn add exif-js 或者npm install exif --save 实在调试不同也可以注释掉不用
*/
import Exif from 'exif-js'; //Exif需要安装以下 yarn add exif-js 或者npm install exif --save
export const imgPreview = (file, oldFile ,calBackFunc) => {//文件流 ，源文件形式，回调函数
let self = this;
let Orientation;
//去获取拍照时的信息，解决拍出来的照片旋转问题
Exif.getData(file, function () { //如果exif 报错 注释掉就没有图片旋转了
Orientation = Exif.getTag(this, "Orientation");
});
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function () {
console.log(this.result);
let result = this.result; //此时this指向reader this.result是图片的base64
let img = new Image();
img.src = result;
//判断图片是否大于500K,是就直接上传，反之压缩图片
if (this.result.length <= 500 * 1024) {
// self.headerImage = this.result; // todo:
// self.postImg(oldFile);
calBackFunc(this.result, oldFile)
} else {
img.onload = function () {
let data = compress(img, Orientation);
// self.headerImage = data; //todo
// self.postImg(oldFile);
calBackFunc(data, oldFile)
};
}
};
}
}
// 压缩图片
export const compress = (img, Orientation)=> {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
// let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = (width * height) / 4000000) > 1) {
// console.log("大于400万像素");
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = (width * height) / 1000000) > 1) {
// console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / 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, width, height);
}
//修复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);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL("image/jpeg", 0.1);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
}
// 旋转图片
export const rotateImg = (img, direction, canvas) => {
//最小与最大旋转方向，图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == "right") {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = (step * 90 * Math.PI) / 180;
let ctx = canvas.getContext("2d");
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}
//将base64转换为文件
export const dataURLtoFile = (dataurl,oldFile) => {
var arr = dataurl.split(","),
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], oldFile.file.name, {
type: oldFile.file.type
});
}
以下是未拆分的代码形式，希望在整体的逻辑构图上能帮到你~~
原博客代码及网址 https://www.jb51.net/article/162760.htm。
vue
<van-uploader multiple
v-model="fileList"
:before-read="beforeRead"
:after-read="onRead"
:max-count="3" >
</van-uploader>
data() {
return {
files: {
name: "",
type: ""
},
headerImage: null,
picValue: null,
upImgUrl,
}
},
methods(){
// 组件方法 获取 流
async onRead(file) {
// console.log(file);
// console.log(file.file);
this.files.name = file.file.name; // 获取文件名
this.files.type = file.file.type; // 获取类型
this.picValue = file.file; // 文件流
this.imgPreview(this.picValue);
},
// 处理图片
imgPreview(file) {
let self = this;
let Orientation;
//去获取拍照时的信息，解决拍出来的照片旋转问题
Exif.getData(file, function () {
Orientation = Exif.getTag(this, "Orientation");
});
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function () {
// console.log(this.result);
let result = this.result;
let img = new Image();
img.src = result;
//判断图片是否大于500K,是就直接上传，反之压缩图片
if (this.result.length <= 500 * 1024) {
self.headerImage = this.result;
self.postImg();
} else {
img.onload = function () {
let data = self.compress(img, Orientation);
self.headerImage = data;
self.postImg();
};
}
};
}
},
// 压缩图片
compress(img, Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
// let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = (width * height) / 4000000) > 1) {
// console.log("大于400万像素");
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = (width * height) / 1000000) > 1) {
// console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / 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, width, height);
}
//修复ios上传图片的时候 被旋转的问题
if (Orientation != "" && Orientation != 1) {
switch (Orientation) {
case 6: //需要顺时针（向左）90度旋转
this.rotateImg(img, "left", canvas);
break;
case 8: //需要逆时针（向右）90度旋转
this.rotateImg(img, "right", canvas);
break;
case 3: //需要180度旋转
this.rotateImg(img, "right", canvas); //转两次
this.rotateImg(img, "right", canvas);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL("image/jpeg", 0.1);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
// 旋转图片
rotateImg(img, direction, canvas) {
//最小与最大旋转方向，图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == "right") {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = (step * 90 * Math.PI) / 180;
let ctx = canvas.getContext("2d");
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
},
//将base64转换为文件
dataURLtoFile(dataurl) {
var arr = dataurl.split(","),
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], this.files.name, {
type: this.files.type
});
},
//这里写接口
async postImg() {
let file = this.dataURLtoFile(this.headerImage);
let formData = new window.FormData();
formData.append("file", file);
toast_loding(this, "图片上传中···");
try {
let res = await util.ajax.post(this.upImgUrl, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
});
} catch (e) {
console.log(e);
}
}
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)