读取 base64 的 blob 文件并上传到服务器

Question

当我在上传区域拖放文件时，React-dropzone returns 对象如：

let picture = [
    {
        "rawFile": {
            "preview": "blob:http://localhost:3000/ff851b03-b2c0-4212-9240-8d07057ad47d"
        },
        "src": "blob:http://localhost:3000/ff851b03-b2c0-4212-9240-8d07057ad47d",
        "title": "1397-01-20 13.43.24.jpg"
    }
]

我读了这个 link 并尝试上传文件：

但是我觉得文件不会发送。

这是我的代码：

let formData = new FormData();
formData.append('file', picture[0]);
fetch('http://localhost:8000/api/media', {
 method: 'POST',
 body: formData
});

如果此方法不正确，如何将文件发送到服务器端并在服务器端接收？

在服务器端，我使用的是 Hapij。

Answer 1

我解决了这个问题。我写下答案是因为没有人回答这个问题。

在客户端，我使用FileReader API读取BLOB数据并将其转换为base64可读格式。我编写了一个将 blob 转换为 base64 并将 fileName 和 base64 发送到服务器端的函数。

const convertFileToBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file.rawFile);

    reader.onload = () => resolve({
        fileName: file.title,
        base64: reader.result
    });
    reader.onerror = reject;
});

在服务器端，我通过这个函数将缓冲区写入文件：

const fs = require("fs");
const Boom = require('boom');

function convertBase64ToFile(file) {

  let base64Data = file.base64.split(',')[1];

  fs.writeFile(`${__dirname}/../../uploads/${file.fileName}`, base64Data, 'base64', function(err) {
    return Boom.badData(err);
  });

  // Other actions...

}

这个方法非常适合我。

读取 base64 的 blob 文件并上传到服务器

Read blob file in base64 and upload on the server

javascript

blob

node.js

reactjs

react-dropzone