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