前端上传图片的数据处理

上传图片 & 获取File对象

<input type="file" accept="image/*" id="pic_test" />

(() => {
    let picDom = document.getElementById('pic_test');

    picDom.addEventListener('change', (e) => {
        let file = picDom.files[0];
        console.log('change', file);
    })
})();

File对象转base64

MDN：FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

base64格式的图片数据直接设置为 img 的src属性值，可实现预览功能<img src="base64Data" />

const fileReader = new FileReader();
fileReader.readAsDataURL(file); //读取图片
fileReader.addEventListener('load', function() {
    let base64Data = fileReader.result
    // base64Data是base64格式的图片
    console.log(base64Data);
})

File对象转Blob

let file = picDom.files[0];
let blob = new Blob([file], { type: file.type });
// Blob {size: 1818, type: 'image/png'}

base64转Blob

let blob = new Blob([base64Data], { type: file.type });
// Blob {size: 1818, type: 'image/png'}

上传

设置 header 'Content-Type': 'multipart/form-data' 和 new FormData()上传文件