<van-uploader v-model="fileList" multiple :after-read="afterRead" max-count="1">
<button type="button"><span>+</span> 轉賬截圖</button>
</van-uploader>
afterRead(file) {
if (!file.file) {
return;
}
// 此時可以自行將文件上傳至服務器
file.status = "uploading";
file.message = "上傳中...";
let maxSize = 1 * 1024 * 1024; //自己定義的文件大小，超過多少M就開始壓縮(現在是1M)
let fileObj = file.file; // 當前的圖片
if (fileObj.size > maxSize) {
this.imgcompress(fileObj, file);
} else {
const formData = new FormData();
formData.append("file[]", file.file); //此處的文件上傳是formData格式
formData.append("private", 0);
let dirName = "voucher_img";
formData.append("dir", dirName);
console.log(file.file);
upload(formData)
.then((res) => {
this.rechargeFile = res.data.data;
file.status = "";
file.message = "";
})
.catch((err) => {
file.status = "failed";
file.message = "上傳失敗";
});
}
},
imgcompress(file, files) {
const img = document.createElement("img");
const reader = new FileReader(); // 讀取文件資源實例
reader.readAsDataURL(file); //讀取圖片資源
reader.onload = (e) => {
//讀取成功
img.src = e.target.result;
const { width: originWidth, height: originHeight } = img; //上傳的圖片的寬高
const maxWidth = 1000, //設置一個canvas 的最大寬高
maxHight = 1000;
if (originWidth > maxWidth || originHeight > maxHight) {
//計算出圖片的縮放比例
if (originWidth > originHeight) {
//寬 大於 高
const Proportion = Math.ceil(originWidth / maxWidth);
let targetWidht = parseInt(originWidth / Proportion); //目標的寬度
let targetHeight = parseInt(originHeight / Proportion); //目標的高度
this.createCanvasCompress(targetWidht, targetHeight, img, files);
} else {
const Proportion = Math.ceil(originHeight / maxHight); //高大於寬
let targetWidht = parseInt(originWidth / Proportion); //目標的寬度
let targetHeight = parseInt(originHeight / Proportion); //目標的高度
let bold = this.createCanvasCompress(
targetWidht,
targetHeight,
img,
files
);
}
} else {
let quality = 0.8;
this.createCanvasCompress(
originWidth,
originHeight,
img,
files,
quality
);
}
};
},
createCanvasCompress(targetWidth, targetHeight, img, files, quality) {
let that = this;
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// 設置寬高度為等同於要壓縮圖片的尺寸
canvas.width = targetWidth;
canvas.height = targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight);
//將img繪制到畫布上
console.log(targetWidth, targetHeight);
context.drawImage(img, 0, 0, targetWidth, targetHeight);
files.content = canvas.toDataURL(files.file.type, 0.8); // 0.92為默認壓縮質量
const newFile = this.dataURLtoFile(files.content, files.file.name);
const formData = new FormData();
formData.append("file[]", newFile);
formData.append("private", 0);
let dirName = "voucher_img";
formData.append("dir", dirName);
console.log(newFile);
upload(formData) //發送上傳請求
.then((res) => {
this.rechargeFile = res.data.data;
files.status = "";
files.message = "";
})
.catch((err) => {
files.status = "failed";
files.message = "上傳失敗";
});
});
},