axios 如何从get response中获取gif

kmbjn2e3 于 2023-03-29 发布在 iOS

关注(0)|答案(1)|浏览(126)

这里我有一个flask函数，它返回图像：

@app.route("/getResults", methods=['GET'])
def get_results():
    print(request)
    job_key = request.args["id"]
    filename = '/home/pat/projets/giftmaker/webapp/public/workingDir/1/test.png'
    return send_file(filename, mimetype='image/png')

然后我尝试去读它：

export function Download ({jobID}) {
    
    const [img, setImg] = useState(null);
    
    
    function test() {
        const params = new URLSearchParams([['id', jobID]]);
        axios.get('/getResults', {params}, {responseType: "arraybuffer"})
            .then((response) => {
                setImg(Buffer.from(response.data, "binary").toString("base64"))
            })
            .catch((e) => {
                console.log(e)
            })
     };


    return(
     <div>
        <button onClick={test}> Display </button>
        <img src={`data:image/png;base64,${img}`} />
     </div>
    )
};

这是我从get请求中得到的响应：

�PNG

�
���
IHDR���h���h�����������=�zTXtRaw profile type exif��xڥ�Y��6�m��Vd�H

实际上比那要长，但你会明白的...
我已经尝试了这么多的东西，我发现从stackoverflow，但似乎没有工作。我正在测试一个小图像，但它应该是一个gif，可以是1- 5 Mb
从flask.send_file发送的数据是二进制的，对吗？

axios

来源：https://stackoverflow.com/questions/75862307/how-to-get-gif-from-get-response

1条答案

按热度按时间

zzwlnbp81#

是的，从send_file返回的数据是二进制的。有多种原因可能会出错：

CORS：可能是你的前端连接被拒绝了，检查开发工具，如果请求成功，你应该在“预览”中看到图像
缺少依赖项：你使用了一个你需要导入的包“Buffer”，如果这是问题所在，你会在控制台得到一个错误信息“Buffer is not defined”
另外，请确保您返回的图像确实存在：）

我让它这样工作：
api.py

from flask import Flask, request, send_file
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/", methods=['GET'])
def get_results():
    print(request)
    filename = 'test.png'
    return send_file(filename, mimetype='image/png')

app.run(host='0.0.0.0', port=8081)

App.js

import React, { useState } from 'react';
import axios from 'axios';
import { Buffer } from 'buffer';

function App() {
  const [img, setImg] = useState(null);

  function test() {
    axios.get('http://localhost:8081', { responseType: "arraybuffer" })
      .then((response) => {
        setImg(Buffer.from(response.data, "binary").toString("base64"))
      })
      .catch((e) => {
        console.log(e)
      })
  };

  return (
    <div>
      <button onClick={test}> Display </button>
      <img src={`data:image/png;base64,${img}`} />
    </div>
  )
}

export default App;

赞(0）回复(0）举报 2023-03-29

我来回答

axios 如何从get response中获取gif

1条答案

相关问题

热门标签

最新问答