【记录59】携带token加载图片、图片过大自行压缩、转base64、

本篇文章主要是写有关图片的一些事务处理，当然图片的存储有两种方式：1. 以base64字符串存；2.以URL链接形式存（该方法适用所有）
常规：首先都会对图片进行判别是否是图片及内存多少，其次才可以进入事务处理

const file = e.target.files[0]; // 上传的文件if (!file) return; // 是否存在// 验证文件类型if (!file.type.startsWith("image/")) {this.$message.error("请选择图片文件");return;}// 图片大小const isLt = file.size / 1024 / 1024;const isLt50M = isLt < 50;if (!isLt50M) {this.$toast.fail("图片大小不能超过50MB!");return;}

一、转base64【简单】

该方法直接就在前端完全处理了，不需要依赖后端，这里需要注意的是建议是小内存的图片，不宜过大。

this.handleImageFile(file, file.type, pellucidity).then((res) => {this.plamfaceList.push({name: file.name,base64: res.toString(),});});

handleImageFile(file, type = "image/jpeg", pellucidity = 0.7) {// compressImage(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function () {const img = new Image();// img.src就可以直接拿到照片的base64格式};reader.onerror = function (error) {reject(error);};});},

二、图片过大自行压缩【还行吧】

为什么要进行压缩，是因为以base64存储的时候，存在传参值过大，无法正常提交。

// 判断图片大小所属范围取对应压缩值const isInRange = (num, min, max) => {return num >= min && num <= max ? true : false;};let pellucidity = isInRange(isLt, 1, 2)? 0.4: isInRange(isLt, 2, 4)? 0.2: isInRange(isLt, 4, 10)? 0.1: isInRange(isLt, 10, 100)? 0.001: 0.9;this.handleImageFile(file, file.type, pellucidity).then((res) => {this.plamfaceList.push({name: file.name,base64: res.toString(),});});

// 压缩图片handleImageFile(file, type = "image/jpeg", pellucidity = 0.7) { // file照片文件，type照片格式 pellucidity 压缩比例// compressImage(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function () {const img = new Image();img.src = reader.result;img.onload = function () {const canvas = document.createElement("canvas");// const scaleSize = 1920 / img.width; // 调整目标尺寸const ctx = canvas.getContext("2d");canvas.height = img.height;canvas.width = img.width; // 目标宽度// canvas.width = 1920;ctx.drawImage(img, 0, 0, canvas.width, canvas.height);const dataUrl = canvas.toDataURL(type, pellucidity); // 压缩质量为0.7（0到1之间）resolve(dataUrl);};img.onerror = function (error) {reject(error);};};reader.onerror = function (error) {reject(error);};});},

三、携带token加载图片【复杂，做完就简单了】

为什么图片加载要用到token呢，是为了防止图片别人乱下载，减少了乱下载就会降低服务器的资源浪费。
这个肯定是有后端配合的，那肯定就要以formData的方法传递，formData主要就是用于文件和图片的传递。

	const formdata = new FormData();formdata.append("file_name",  file.name);  // 图片名称formdata.append("file_url", _file); // 图片信息return new Promise((resolve, reject) => {recordAPI.filesavePost(formdata).then((res) => { // 该URL在request中配置了config的header中添加了token：‘token’// 返回的res中必带有图片或文件的数据库存放路径，这里给后面直接访问图片留下伏笔if (res.code === 201) {this.form.palmfacePiucre.push({name: file.name,base64: res.data.file_url,});resolve(true);// this.HeaderAuth("test", picturePath); // 无用} else {resolve(false);}}).catch(() => {resolve(false);reject(false);});});

（一）直接查看照片

直接查看照片，顾名思义就是直接打开看就完事了，要注意是这里是需带token才能访问图片
这里默认一个【查看】按钮，点击直接下载图片

HeaderAuth(name, url) {var liend = url.split(".");var headers = {authorization:"9hnrlzgLy1zoOKQjLR5xP***************************59d",// "X-XSRF-TOKEN": "你的XSRF令牌",// "X-Requested-With": "XMLHttpRequest",// "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",// "cookie": "你的Cookie"};// 使用Fetch API发送GET请求fetch(url, { headers }).then((response) => {if (!response.ok) {throw new Error(`请求失败，状态码：${response.status}`);}return response.blob(); // 获取响应数据并转换为Blob}).then((blob) => {const downloadUrl = URL.createObjectURL(blob); // 创建一个临时URLconsole.log(downloadUrl, "downloadUrl");const a = document.createElement("a"); // 创建一个a标签a.href = downloadUrl;a.download = name + "." + liend[liend.length - 1]; // 设置下载文件的名字document.body.appendChild(a); // 将a标签添加到文档中a.click(); // 触发a标签的点击事件a.remove(); // 移除a标签URL.revokeObjectURL(downloadUrl); // 释放临时URLconsole.log(URL.revokeObjectURL(downloadUrl), 77777777);}).catch((error) => {console.error("请求出错:", error);});},

（二）根据路径以base64查看照片

这里就需要将照片转成base64来显示，首先要访问拿到照片资源

async getImgURLOfBase64(path) {var config = {method: "get",responseType: "arraybuffer",url: this.visitAddress + path,headers: { Authorization: ‘token’ }, // token认证才能拿到照片信息，然后转成需要的base64将照片显示出来};return new Promise((resolve, reject) => {axios(config).then((response) => {if (response.status === 200) {let basestr ="data:image/png;base64," +btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte),""));// console.log(basestr, "basestr"); // 结果：照片base64格式，拿到直接在img中就可以显示resolve(String(basestr));} else {console.log("auth照片处理失败");this.$message.warning("加载失败，请重新加载");reject("auth照片处理失败");}});});},

这里为啥要转base64是因为img标签 中src直接访问照片URL链接是无法加载出来的