Загрузка и изменение размера изображения с помощью Axios / Sharp - PullRequest
Новая
       10

Загрузка и изменение размера изображения с помощью Axios / Sharp

0 голосов
/ 04 июля 2019

В настоящее время я пытаюсь загрузить изображение с помощью Axios, а затем изменить его размер и сохранить его локально с помощью Node в распознавателе GraphQL.

Это блок кода, с которым я работаю: 

axios.get(url)
    .then((response) => {
        const { set, collector_number } = response.data;
        const sourceUrl = response.data.image_uris.border_crop;
        const filename = `${set}/${collector_number}.png`;
        axios.get(sourceUrl, { responseType: 'arraybuffer' })
            .then((res) => {
                console.log(`Resizing Image!`)
                sharp(res)
                    .resize(226, 321)
                    .toFile(`../cardimg/${filename}`)
                    .then(() => {
                        console.log(`Image downloaded and resized!`)
                    })
                    .catch((err) => {
                        console.log(`Couldn't process: ${err}`);
                    })
            })
    })

Когда я выполняю код (с помощью мутации GraphQL), он выдает ошибку, в которой говорится: Input file is missing.

Не уверен, что это неправильное использование Axios или я делаючто-то не так с Sharp.

Есть предложения?Изначально я волновался, что мне нужно возиться с форматом ответа, получаемого от HTTP-запроса, но из того, что я могу собрать, я делаю это правильно.

Заранее спасибо!

Я использовал console.log, чтобы убедиться, что он определенно захватывает изображение и URL-адрес правильный, так что это уже было проверено, поэтому sourceUrl действительно захватывает изображение, я просто не уверен, как правильно что-либо делать - с- данные, которые я собираю.

1 Ответ

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

axios возвращает полное тело ответа, например status, headers, config.Тело ответа находится в ключе .data.Таким образом, в вашем случае это будет: 

axios.get(..).then((res) => { sharp(res.data)})

Кроме того, обещания внутри обещаний считаются анти-паттернами, вы можете легко их зацепить. 

let fileName;
axios.get(url)
  .then((response) => {
    const { set, collector_number } = response.data;
    const sourceUrl = response.data.image_uris.border_crop;
    filename = `${set}/${collector_number}.png`;
    return axios.get(sourceUrl, { responseType: 'arraybuffer' })
  })
  .then((res) => {
    console.log(`Resizing Image!`)
    return sharp(res.data)
      .resize(226, 321)
      .toFile(`../cardimg/${filename}`)
  })
  .then(() => {
    console.log(`Image downloaded and resized!`)
  })
  .catch((err) => {
    console.log(`Couldn't process: ${err}`);
  })
...