移动端移动端 Vue+Vant 的的Uploader 实现上传、压缩、旋转图片功实现上传、压缩、旋转图片功
能能
主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能，本文通过实例代码给大家介绍的非
常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
面向百度开发面向百度开发
html
<van-uploader :after-read="onRead" accept="image/*">
<img src="./icon_input_add.png" />
</van-uploader>
js
data() {
return {
files: {
name: "",
type: ""
},
headerImage: null,
picValue: null,
upImgUrl,
}
},
// 组件方法 获取 流
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");
评论0