Как получить изображение из колбы с аксиосами - PullRequest
Новая
       31

Как получить изображение из колбы с аксиосами

1 голос
/ 10 июля 2019

это мой маршрут испытаний колбы, который должен дать изображение: 

@app.route('/marknext', methods=['GET', 'POST'])
def marknext():
    id = request.form.get("ID")
    if request.method == 'POST':
        return "OK"
    else:
        image_file_path = '/home/cnd/contrib/python/input/ChinaSet_AllFiles/CXR_png/CHNCXR_0370_1.png'
        # res = make_response(send_file(image_file_path, add_etags=False, cache_timeout=0))
        # return res
        return send_file(image_file_path, add_etags=False, cache_timeout=0, attachment_filename='CHNCXR_0370_1.png')

и на стороне клиента я пытаюсь получить этот файл с помощью axios и поместить его в <img>

  axios.get('/marknext', {
    params: {
      ID: 0
    }
  })
  .then(function (response) {
    var reader = new window.FileReader();
    reader.readAsDataURL(response.data); 
    reader.onload = function() {
      var imageDataUrl = reader.result;
      $("#selected-image").attr("src", imageDataUrl)
    }
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

И я получаю свою ошибку на консоли: 

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    at mark.js:14

Что я делаю не так?

1 Ответ

2 голосов
/ 10 июля 2019

Не очень много опыта работы с Axios, но некоторые поиски в Google привели меня к аналогичному вопросу, заданному в субреддите ReactJS . Кажется, вам нужно инициализировать Blob, используя response.data, а затем передать его readAsDataURL() вместо response напрямую. 

.then(function (response) {
    var responseBlob = new Blob([response.data], {type:"image/png"}); 
    var reader = new window.FileReader();
    reader.readAsDataURL(responseBlob); 
    reader.onload = function() {
      var imageDataUrl = reader.result;
      $("#selected-image").attr("src", imageDataUrl)
    }
  })
...