前端base64上传文件

前端Base64上传文件通常是在不需要服务器直接存储临时文件的情况下，将文件内容转换成Base64编码字符串的过程。这样做可以简化前端与服务器之间的交互，特别是对于小文件或者图片、文本等非二进制大文件。

以下是基本步骤：

1. **选择文件**：使用`HTML5`的`input type="file"`让用户选择本地文件。
2. **读取文件**：获取到文件后，使用JavaScript的File API，如`FileReader`对象，读取文件内容。
3. **转化为Base64**：调用`FileReader`的`readAsDataURL()`方法，读取文件数据并将其转换为Base64字符串。
4. **发送请求**：将Base64编码后的字符串作为`Content-Type: application/json`或其他适当的格式附加到HTTP请求体中，发送给服务器。

例如，在`fetch`或`axios`这类库中，代码可能看起来像这样：

let fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (event) => {
    let file = event.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    await new Promise((resolve, reject) => {
        reader.onloadend = () => {
            let base64Data = reader.result;
            // 发送POST请求，将base64Data作为body的数据部分
            fetch('/api/upload', { method: 'POST', body: JSON.stringify({ fileData: base64Data }) })
                .then(response => response.json())
                .then(data => console.log('Upload successful:', data))
                .catch(error => console.error('Error uploading:', error));
            resolve();
        };
        reader.onerror = reject;
    });
});