前端上传图片的数据处理

44 阅读1分钟

单人主体 (18).jpg

上传图片 & 获取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);
    })
})();

截屏2022-10-24 18.06.19.png

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);
})

截屏2022-10-24 18.17.59.png

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()上传文件