vant上传图片 转二进制_土旦：移动端 Vue+Vant 的Uploader 实现 ：上传、压缩、旋转图片...

面向百度开发

html

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 <= * ) {

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 canva