?<van-uploader?v-model="fileList"?multiple?:after-read="afterRead"?max-count="1">
? ? ? ? ? ? ? ?<button?type="button"><span>+</span>?轉(zhuǎn)賬截圖</button>
??????????????</van-uploader>
afterRead(file) {
? ? ? if (!file.file) {
? ? ? ? return;
? ? ? }
? ? ? // 此時(shí)可以自行將文件上傳至服務(wù)器
? ? ? file.status = "uploading";
? ? ? file.message = "上傳中...";
? ? ? let maxSize = 1 * 1024 * 1024; //自己定義的文件大小抗蠢，超過多少M(fèi)就開始?jí)嚎s(現(xiàn)在是1M)
? ? ? let fileObj = file.file; // 當(dāng)前的圖片
? ? ? 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(); // 讀取文件資源實(shí)例
? ? ? reader.readAsDataURL(file); //讀取圖片資源
? ? ? reader.onload = (e) => {
? ? ? ? //讀取成功
? ? ? ? img.src = e.target.result;
? ? ? ? const { width: originWidth, height: originHeight } = img; //上傳的圖片的寬高
? ? ? ? const maxWidth = 1000, //設(shè)置一個(gè)canvas 的最大寬高
? ? ? ? ? maxHight = 1000;
? ? ? ? if (originWidth > maxWidth || originHeight > maxHight) {
? ? ? ? ? //計(jì)算出圖片的縮放比例
? ? ? ? ? if (originWidth > originHeight) {
? ? ? ? ? ? //寬 大于 高
? ? ? ? ? ? const Proportion = Math.ceil(originWidth / maxWidth);
? ? ? ? ? ? let targetWidht = parseInt(originWidth / Proportion); //目標(biāo)的寬度
? ? ? ? ? ? let targetHeight = parseInt(originHeight / Proportion); //目標(biāo)的高度
? ? ? ? ? ? this.createCanvasCompress(targetWidht, targetHeight, img, files);
? ? ? ? ? } else {
? ? ? ? ? ? const Proportion = Math.ceil(originHeight / maxHight); //高大于寬
? ? ? ? ? ? let targetWidht = parseInt(originWidth / Proportion); //目標(biāo)的寬度
? ? ? ? ? ? let targetHeight = parseInt(originHeight / Proportion); //目標(biāo)的高度
? ? ? ? ? ? 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");
? ? ? ? // 設(shè)置寬高度為等同于要壓縮圖片的尺寸
? ? ? ? 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為默認(rèn)壓縮質(zhì)量
? ? ? ? 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 = "上傳失敗";
? ? ? ? ? });
? ? ? });
? ? },
JS部分
afterRead(file)?{
??????if?(!file.file)?{
????????return;
??????}
??????//?此時(shí)可以自行將文件上傳至服務(wù)器
??????file.status?=?"uploading";
??????file.message?=?"上傳中...";
??????let?maxSize?=?1?*?1024?*?1024;?//自己定義的文件大小，超過多少M(fèi)就開始?jí)嚎s(現(xiàn)在是1M)
??????let?fileObj?=?file.file;?//?當(dāng)前的圖片
??????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();?//?讀取文件資源實(shí)例
??????reader.readAsDataURL(file);?//讀取圖片資源
??????reader.onload?=?(e)?=>?{
????????//讀取成功
????????img.src?=?e.target.result;
????????const?{?width:?originWidth,?height:?originHeight?}?=?img;?//上傳的圖片的寬高
????????const?maxWidth?=?1000,?//設(shè)置一個(gè)canvas?的最大寬高
??????????maxHight?=?1000;
????????if?(originWidth?>?maxWidth?||?originHeight?>?maxHight)?{
??????????//計(jì)算出圖片的縮放比例
??????????if?(originWidth?>?originHeight)?{
????????????//寬?大于?高
????????????const?Proportion?=?Math.ceil(originWidth?/?maxWidth);
????????????let?targetWidht?=?parseInt(originWidth?/?Proportion);?//目標(biāo)的寬度
????????????let?targetHeight?=?parseInt(originHeight?/?Proportion);?//目標(biāo)的高度
????????????this.createCanvasCompress(targetWidht,?targetHeight,?img,?files);
??????????}?else?{
????????????const?Proportion?=?Math.ceil(originHeight?/?maxHight);?//高大于寬
????????????let?targetWidht?=?parseInt(originWidth?/?Proportion);?//目標(biāo)的寬度
????????????let?targetHeight?=?parseInt(originHeight?/?Proportion);?//目標(biāo)的高度
????????????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");
????????//?設(shè)置寬高度為等同于要壓縮圖片的尺寸
????????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為默認(rèn)壓縮質(zhì)量
????????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?=?"上傳失敗";
??????????});
??????});
????},
