使用Axios下载映像并将其转换为base64

6yoyoihd  于 2022-11-23  发布在  iOS
关注(0)|答案(6)|浏览(213)

我需要从远程服务器下载一个.jpg图像并将其转换为base64格式。我使用axios作为我的HTTP客户端。我尝试向服务器发出git请求并检查response.data,但它似乎不是这样工作的。
axios链接:https://github.com/mzabriskie/axios
链接到base64实现:https://www.npmjs.com/package/base-64
我正在使用NodeJS / React,所以atob/btoa不起作用,因此该库。

axios.get('http://placehold.it/32').then(response => {
    console.log(response.data); // Blank
    console.log(response.data == null); // False 
    console.log(base64.encode(response.data); // Blank
}).catch(err => console.log(err));
hyrbngr7

hyrbngr71#

这对我来说非常有效:

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => Buffer.from(response.data, 'binary').toString('base64'))
}
tyg4sfes

tyg4sfes2#

可能有更好的方法来实现这一点,但我已经这样做了(减去catch()等额外的位):

axios.get(imageUrl, { responseType:"blob" })
    .then(function (response) {

        var reader = new window.FileReader();
        reader.readAsDataURL(response.data); 
        reader.onload = function() {

            var imageDataUrl = reader.result;
            imageElement.setAttribute("src", imageDataUrl);

        }
    });

我怀疑你的问题至少有一部分可能是服务器端的。即使没有设置{ responseType: "blob" },你也应该在response.data输出中有一些东西。

cuxqih21

cuxqih213#

这就是我的工作方式(使用Buffer.from)-

axios
  .get(externalUrl, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const buffer = Buffer.from(response.data, 'base64');
  })
  .catch(ex => {
    console.error(ex);
  });
erhoui1w

erhoui1w4#

使用responseType: "text", responseEncoding: "base64"将获得编码为base64字符串的响应正文
例如,示例代码将获取base64并将一个jpg文件写入磁盘。

import axios from "axios";
import fs from "fs";

axios
  .get("https://picsum.photos/255", {
    responseType: "text",
    responseEncoding: "base64",
  })
  .then((resp) => {
    console.log(resp.data);
    fs.writeFileSync("./test.jpg", resp.data, { encoding: "base64" });
  })
t1rydlwq

t1rydlwq5#

您可以将blob从FileReader api转换为base64,然后显示它。

const fileReaderInstance = new FileReader();
 fileReaderInstance.readAsDataURL(blob); 
 fileReaderInstance.onload = () => {
 base64data = fileReaderInstance.result;                
 console.log(base64data);
 }

并将其显示为:

<Image source={{uri: base64ImageData}} />
vdzxcuhz

vdzxcuhz6#

import { Axios } from "axios";

const axios = new Axios({});

const res = await axios.get(url, {
  responseType: "text",
  responseEncoding: "base64",
});

const base64 = Buffer.from(res.data, "base64");

相关问题