面向百度开发
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");
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;
