Как понять почему изображение не валидно?

Question

[FlashDok]

Запущено vkminiapps.
Далее я выбираю картинку

const handleFileChange = (event) => {
      setImg(event.target.files[0]);
      console.log(event.target.files[0]);
  };

<FormItem top="Загрузите картинка">
    <File onChange={handleFileChange}/>
</FormItem>

С картинкой вроде всё нормально. имя например выводится

<Div>
    {img ? `Selected file: ${img.name}` : 'No file selected'}
</Div>

Далее т.к с клиента нельзя загрузить картинку на сервера вк, я делаю так.

console.log(data.response.upload_url)
                  const response = await fetch('http://localhost:3000/upload-image', {
                      method: 'POST',
                      headers: {
                          'Content-Type': 'application/json'
                      },
                      body: JSON.stringify({
                          image : img,
                          uploadUrlvk : data.response.upload_url
                      })
                  });
                  console.log(response);

Код файла куда "отправил" картинку и ссылку для загрузки.

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/', async (req, res) => {
    console.log("asd");
});

app.post('/upload-image', async (req, res) => {
    const { image, uploadUrlvk } = req.body;
    try {
        const formData = new FormData();
        formData.append('image', image);
        const uploadUrl = uploadUrlvk;
        const response = await fetch(uploadUrl, {
            method: 'POST',
            body: formData,
        });

        const responseData = await response.json();
        console.log(responseData);
        res.status(200).json({ message: 'Image uploaded successfully' + uploadUrlvk });
    } catch (error) {
        console.error(error);
        res.status(500).json({ message: 'Failed to upload image' + image });
    }

});

app.listen(3000, () => {
    console.log('App listening on port 3000!');
});

И получаю в консоли терминала такую ошибку
TypeError: source.on is not a function

Это может означать, что параметр file не является поддерживаемым файловым объектом. Нужно передать файл в правильном формате, чтобы использовать его в качестве тела запроса.

Answer 1

[Alexandroppolus]

на этот твой 'localhost:3000/upload-image' картинку тоже надо отправлять через FormData, а не как json

Comments

[FlashDok]

const formData = new FormData();
                  formData.append('image', img);
                  formData.append('uploadUrlvk', data.response.upload_url);
                  console.log(formData);
                  const response = await fetch('http://localhost:3000/upload-image', {
                      method: 'POST',
                      headers: {
                          'Content-Type': 'multipart/form-data'
                      },
                      body: formData,
                  });

console.log(formData); выдает объект formData с длинной 2, но на localhost:3000

app.post('/upload-image', async (req, res) => {
    const { image, uploadUrlvk } = req.body;
    console.log(req.body);

console.log(req.body) - выдает {}