как отправить фотографию с бэкенда на фронтенд nodejs express

Question

Всем привет,я хочу отправить фото с бэкенда на фронтенд и установить его по умолчанию в <input type="file"> и как я понял мне надо отправить буффер с бэкенда на фронт енд.Вот мой контролер в бэкенде отвечающий за это

  async getRecipePhoto(req, res, next) {
    try {
      const fileName = req.params.name;
      const filePath = path.join(__dirname, "../static", `${fileName}`);
      const fileData = fs.readFileSync(filePath);
      console.log(fileData);
      res.json(fileData);
    } catch (e) {}
  }

и на фронтенде мне нужно превратить его в blob и потом конечно в file

  React.useEffect(() => {
console.log(dataPhotoOfRecipe);
if (isSuccessPhotoOfRecipe) {
  const photoBlob = new Blob([dataPhotoOfRecipe?.data], {
    type: "image/jpeg",
  });

  const file = new File([photoBlob], dataRecipe?.img, {
    type: "image/jpeg",
  });

  console.log(file);

  // setPhoto(photoFile);
  // console.log(photoFile);
}

}, [isSuccessPhotoOfRecipe]); ` вот мой запрос

  const {
    data: dataPhotoOfRecipe,
    isLoading: isLoadingPhotoOfRecipe,
    isSuccess: isSuccessPhotoOfRecipe,
  } = useGetRecipePhotoQuery(dataRecipe?.img, {
    skip: !isSuccessRecipe === true,
  });

Вот настройки запроса

getRecipePhoto: builder.query({ query: (body) => ({ url: /recipeOfPhoto/${body}, }), }),

Но у меня почему то в объекте файла отстуствует поле data с буффером,но есть размер,что мне делать?

Answer 1

Для возврата файла из метода API можно использовать метод res.download

  async getRecipePhoto(req, res, next) {
    try {
      const fileName = req.params.name;
      const filePath = path.join(__dirname, "../static", fileName);
      res.download(filePath);
    } catch (e) {
        // возможно, исключение-таки стоит обработать, вернув статус 500, например
    }
  }

БЛОГ НА HUSL

как отправить фотографию с бэкенда на фронтенд nodejs express

Ответы (1 шт):