Блог

У меня проблема с отправкой изображения на сервер, это похоже на подход по умолчанию, но, похоже, он не работает.

 var source = '/Users/alexx/Library/Developer/CoreSimulator/Devices/44F0FA92-4898-4CFB-862E-4E5EC4C8AB28/data/Containers/Bundle/Application/34BCE695-4B4F-472F-AB5C-F2336AC45273/DoorLock.app/123.jpg';
const form = new FormData();
form.append('image', {
  uri: source,
  type: 'image/jpg',
  name: '123.jpg',
});

const data = () => {
    fetch(api ,{
      method: 'POST',
      body: form,
    })
  

это ответ, который я получаю от сервера:

 {
  "_bodyBlob": {
    "_data": {
      "__collector": [
        Object
      ],
      "blobId": "78B18938-15BF-4F18-B3C8-1EB30A24D9F8",
      "name": "test.html",
      "offset": 0,
      "size": 192,
      "type": "text/html"
    }
  },
  "_bodyInit": {
    "_data": {
      "__collector": [
        Object
      ],
      "blobId": "78B18938-15BF-4F18-B3C8-1EB30A24D9F8",
      "name": "test.html",
      "offset": 0,
      "size": 192,
      "type": "text/html"
    }
  },
  "bodyUsed": false,
  "headers": {
    "map": {
      "connection": "keep-alive",
      "content-length": "192",
      "content-type": "text/html",
      "date": "Mon, 02 Nov 2020 22:57:21 GMT",
      "server": "PythonAnywhere"
    }
  },
  "ok": false,
  "status": 400,
  "statusText": undefined,
  "type": "default",
  "url": api
}
  

Хотя этот код python работает отлично и получает правильный ответ

 img = {'file':('123.png', open('the path to the pic/123.png', 'rb'), 'image/png)}
post(api, files = img)
  

есть ли какой-либо способ заставить это работать или это проблема на стороне сервера, которая не может получить правильные аргументы?

Добавление «file: //» в начало исходной строки устранило проблему. итак, src выглядит так

 var source = 'file:///Users/alexx/Library/Developer/CoreSimulator/Devices/44F0FA92-4898-4CFB-862E-4E5EC4C8AB28/data/Containers/Bundle/Application/34BCE695-4B4F-472F-AB5C-F2336AC45273/DoorLock.app/123.jpg';
  

затем он отлично извлекается, надеюсь, это поможет всем, кто пытается отправить локальное изображение с помощью formdata, теперь сводка выглядит так

 const form = new FormData();
      form.append('file', {
        uri: source,
        name: '123.jpg',
        fileName: 'file', //optional
      });

fetch(uri,{
             method: 'post',
             body: form,
      })
        .then(response => {
         console.log("image uploaded")
         console.log(response)
       })
        .catch(console.log);
  

В Formdata при передаче файлов вам необходимо передать 3 параметра, где

1. ожидаемый ключ от серверной части (в вашем случае image ).
2. Это будет объект, который имеет три свойства с именем name , type , и uri где тип — это mime type (например: image/jpeg ) .
3. имя файла

Например:

data.append(«Путь к файлу»,{ имя: «image.png», тип: «image /png», uri: «content://com.camera/image.png» },image.png)