前端Img图片不同格式的互相转化

一、格式简介

主要有base64(数字字母组成的乱码那种)、url(http://xxx地址那种)、二进制流(后端上传图片的格式)、本地项目文件夹获取绝对路径（静态文件夹里的image）等。

二、格式互转

2.1、base64在视图上进行页面展示

一般后端会返回一种Base64格式，拿到结果后，我们只需要加上"data:image/png;base64,"进行拼接即可。

视图展示： <img style="height: 700px" **:src="ImgUrl"** />

接口返回时的处理，这里的结果就是base64：

             **   this.ImgUrl = "data:image/png;base64," + res.result;**

2.3、将二进制流转为url进行页面展示

二进制流格式如下图：

转为url:**let src = window.URL.createObjectURL(file); **

结果：****blob:http://localhost:8080/fcd4a78e-6524-4445-84df-5793527ebaf2

** 最后，如果使用了组件的上传组件<xx-upload>,那么在对应的事件里面会直接获得二进制流格式,那就直接对接后台接口即可!**

2.3、静态路径转二进制流传给后端

vue的data里面获取项目静态资源语法：

img: require("@/assets/image/Image_006.jpg")

在utils的文件夹下新建js文件，引入转换的两个方法imageToBase64和base64ToFile

// 首先把图片路径转换为base64的格式
export const imageToBase64 = (img) => {
    // Vue.prototype.$imageToBase64 = img => { //定义全局
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/jpeg" + ext);
    return dataURL;
};
// base64格式转为File文件类型
export const base64ToFile = (urlData, fileName) => {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bytes = atob(arr[1]); // 解码base64
    let n = bytes.length
    let ia = new Uint8Array(n);
    while (n--) {
        ia[n] = bytes.charCodeAt(n);
    }
    return new File([ia], fileName, { type: mime });
}

在页面视图里引入：import { imageToBase64, base64ToFile } from "@/utils/commonApi";

handleImgToBase64(url, cb) {
      var image = new Image();
      image.crossOrigin = "";
      image.src = url;
      image.onload = function () {
        let base64 = imageToBase64(image); //图片转base64
        let file = base64ToFile(base64, "file.jpg"); //base64转File
        // 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】
        cb && typeof cb == "function" && cb(file);
        return file;
      };
    }, 
async answerUpload() {//上传图片
      for (let i = 0; i < this.ImgList.length; i++) {
        let trl = this.ImgList[i].img;
        this.handleImgToBase64(trl, async (ress) => {
          var data = new FormData();
          data.append("Img", ress);
          AnswerUpload(data).then((res) => {//对接后台接口
            if (res.code == 200) {
              this.$message.success("新增成功");
            } else {
              this.$message.error("保存失败");
            }
          });
        });
      }
    },

上传成功之后，可以看到参数形式如下：

扩展：

有时候需要一种标识，除了随机数之外，我们可以直接import { nanoid } from "nanoid";

使用时直接：let a=nanoid(),你就可以获得一组由字母和数字组成的随机字符串。