如何在React Native中使用Axios将图像发送到具有Blob类型的服务器?

时间:2019-07-15 03:34:14

标签: reactjs react-native

我尝试从图库中选择一张图片,然后得到如下数据:

{  
   "exif":null,
   "localIdentifier":"9F983DBA-EC35-42B8-8773-B597CF782EDD/L0/001",
   "filename":"IMG_0003.JPG",
   "width":500,
   "modificationDate":null,
   "mime":"image/jpeg",
   "sourceURL":"file:///Users/vichit/Library/Developer/CoreSimulator/Devices/3BBFABAC-2171-49AA-8B2B-8C2764949258/data/Media/DCIM/100APPLE/IMG_0003.JPG",
   "height":500,
   "creationDate":"1344451932"
}

这次,我想使用Axios将这张图片以Blob类型发送到服务器。

我不知道如何将这张图片转换为Blob类型。

1 个答案:

答案 0 :(得分:1)

很简单:

async function uploadToServer(sourceUrl) {
    // first get our hands on the local file
    const localFile = await fetch(sourceUrl);

    // then create a blob out of it (only works with RN 0.54 and above)
    const fileBlob = await localFile.blob();

    // then send this blob to filestack
    const serverRes = await fetch('https://www.yourAwesomeServer.com/api/send/file', { // Your POST endpoint
        method: 'POST',
        headers: {
          'Content-Type': fileBlob && fileBlob.type,
        },
        body: fileBlob, // This is your file object
    });

    const serverJsonResponse = await serverRes.json();

    // yay, let's print the result
    console.log(`Server said: ${JSON.stringify(serverJsonResponse)}`);
}

并像uploadToServer("file:///Users/vichit/Library/Developer/CoreSimulator/Devices/3BBFABAC-2171-49AA-8B2B-8C2764949258/data/Media/DCIM/100APPLE/IMG_0003.JPG")

一样运行

我花了很长时间才弄清楚,但是现在这很有意义。

我希望能对某人有所帮助!