图片文件File转成base64（文件转换）

一、图片文件转成base64（File文件对象—>base64）

上传文件：

<el-form-item label="服务图标：" prop="serviceName" class="formItem">
   <el-button size="mini" type="reset" icon="el-icon-plus" @click="$refs.serviceImgDom.value = ''; $refs.serviceImgDom.click()"></el-button>
   <img :src="serviceIcon" style="width: 60px;">                        
   <input type="file" ref="serviceImgDom" style="display: none;" accept=".png;.jpeg;.svg;" @change="imgUpload">
</el-form-item>

图片文件转成base64：

imgUpload(e) {            
    let file = e.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => { 
       console.log(reader.result); // base64
       this.serviceIcon = reader.result; 
    } 
    reader.onerror = function(err) {
         console.log(err); 
    }  
},      

二、base64转成File文件对象（base64—>File文件对象）

/**
 * base64图片转file的方法（base64图片, 设置生成file的文件名）
 * @param {*} base64 
 * @param {*} fileName 
 * @returns 
 */
function base64ToFile(base64, fileName) {
    let data = base64.split(',');
    let type = data[0].match(/:(.*?);/)[1];
    let suffix = type.split('/')[1];
    const bstr = window.atob(data[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    // 利用构造函数创建File文件对象
    const file = new File([u8arr], `${fileName}.${suffix}`, {
        type: type
    });
    return file;
}

三、base64转成文件下载（base64—> blob）

downMailDataEncrypt(base64data) {
   var blob = dataURLtoBlob(base64data);
    
   const a = document.createElement("a");
   const objectUrl = URL.createObjectURL(blob);
   a.setAttribute("href", objectUrl);
   a.setAttribute("download", "test.txt");
   a.click();
   URL.revokeObjectURL(a.href); // 释放url
   // base64转blob
   function dataURLtoBlob(dataurl) {
          var arr = dataurl.split(','),
             // mime = arr[0].match(/:(.*?);/)[1],
             bstr = atob(arr[0]),
             n = bstr.length,
             u8arr = new Uint8Array(n);
          while (n--) {
             u8arr[n] = bstr.charCodeAt(n);
         }
         return new Blob([u8arr], { type: 'vkd' });
    }
}

四、File文件对象转成二进制流

// 上传文件File文件对象转成二进制流
fileUpload(e) {
    let file = e.target.files[0];
    // 前端转换成二进制流
    let that = this;
    var reader = new FileReader();
    reader.onload = function (e) {
        var arrayBuffer = e.target.result;
        that.fileData = arrayBuffer;
    };
    reader.readAsArrayBuffer(file);
}

五、应用场景：响应文件流前端js通过blob生成下载链接

// 文件流res下载
// 流转 blob
var blob = new window.Blob([res], { type: 'application/x-msdownload' });

const a = document.createElement("a");
const objectUrl = URL.createObjectURL(blob);
a.setAttribute("href", objectUrl);
a.setAttribute("download", "test.txt");
a.click();
URL.revokeObjectURL(a.href); // 释放url

※ 其他：File、Blob、FileReader、ArrayBuffer的概念及使用

一、Blob

二进制大型对象，表示二进制数据文件的内容。

通常用来读写文件。

new Blob(array[, options]);

第一个参数为数组，必填，数组内容可以是“ArrayBuffer”、"ArrayBufferView"、"Blob"、“DOMString”等，其中DOMString会被编码成UTF-8；

第二个参数，可选，表示数据的MIME类型，options有两个属性：type和endings。

示例：

let blob = new BLob(['hello','world'], { type: 'text/html' });

二、File对象

new FIle(bits, name[, options])
参数bits，必填，参数类型为：“ArrayBuffer”、“ArrayBufferView”、“Blob”、"Array[String]"或者任何这些对象的组合；

参数name，必填，参数类型为String，表示文件名称或文件路径；

参数options，可选，参数类型为对象，可选属性为type（表示文件中的内容为MIME类型）和lastModified（表示文件最后修改时间）;

示例

let file = new File(['hello', 'world'], 'test.txt', { tupe: 'text/plain' })；
var imfile = new File([u8arr], `${fileName}.${suffix}`, {
    type: "png"
});

三、FileReader对象（new FileReader()）

new FileReader()

FileReader的实例方法：

abort()、readAsArrayBuffer(blob)、readAsDataURL(blob)、readAsText(blob[,encoding])

// 前端转换成二进制流
let that = this;
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (e) {
    var arrayBuffer = e.target.result;
    that.fileData = arrayBuffer;
};