Post Image as FormData устанавливает тип контента как text / plain; charset = UTF-8 - PullRequest
Новая
       33

Post Image as FormData устанавливает тип контента как text / plain; charset = UTF-8

0 голосов
/ 20 февраля 2019

У меня есть вопрос из двух частей.

  1. FormData() неправильно настроен Content-Type при отправке изображения.Как мне решить это?

  2. Как прочитать изображение в двоичном виде вместо base64 в react-native

Я пытаюсь загрузитьизображение на сервер в реагирующем.

С react-native-image-picker Я могу выбрать изображение и получить его uri (даже base64).

Затем я создаю FormData() и публикую его через fetch (даже пробовал с axios и XMLHttpRequest).Но для content-type установлено значение text/plain;charset=UTF-8, поэтому req.files равно undefined.

Однако, когда я вручную создаю запрос XMLHttpRequest для , отправьте изображение (показано в разделе «Работа»).с разделом двоичных данных) , я могу отправить изображение.Но данные изображения кодируются в base64, а не в binary.

Код для XMLHttpRequest с FormData

const xhr = new XMLHttpRequest();
xhr.addEventListener('load', res=>{console.log(res)} )
xhr.addEventListener('error', err=>{console.log(err)} )

xhr.open('POST', global.config.getServerAddress() + this.props.api);
xhr.setRequestHeader( 'Authorization', 'Bearer ' +  global.config.token )

const formdata = new FormData();
formdata.append( this.props.label, { name: this.props.label, type: type, fileName: uri.split('/').pop() });

xhr.send(formdata);

код для ручного XMLHttpRequest запроса, который работает,Но нужно отправить данные изображения как binary вместо base64. 

const boundary = "myboundary"
let data = ""
data += "--" + boundary + "\r\n"
data += 'content-disposition: form-data; '
// Define the name of the form data
      + 'name="' + this.props.label + '"; '
// Provide the real name of the file
      + 'filename="'     + uri.split('/').pop() + '"\r\n'
// And the MIME type of the file
data += 'Content-Type: ' + type + '\r\n'

// There's a blank line between the metadata and the data
data += '\r\n'

// Append the binary data to our body's request
data += `data:${type};base64,` + image + '\r\n'
data += "--" + boundary + "--"

var XHR = new XMLHttpRequest()

XHR.addEventListener('load', callbackConf.callback )

XHR.addEventListener('error', callbackConf.errorCallback )

XHR.open('POST', global.config.getServerAddress() + this.props.api )
XHR.setRequestHeader( 'Authorization', 'Bearer ' +  global.config.token )
XHR.setRequestHeader( 'Content-Type', 'multipart/form-data; boundary=' + boundary )

XHR.send( data )

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Для первого запроса попробуйте это (я использовал этот сборщик ): 

let photo = { uri: source.uri}
let formdata = new FormData();

formdata.append("description", 'my-image')
formdata.append("image", {uri: photo.uri, name: 'image.jpg', type: 'multipart/form-data'})


fetch('YOUR_URL',{
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formdata
  }).then(response => {
    console.log("image uploaded")
  }).catch(err => {
    console.log(err)
  })  
});
0 голосов
/ 20 февраля 2019

Я сделал это через fetch, чтобы добавить данные в данные формы, сделайте:

const data = new FormData(); data.append('image', { uri: uri, type: 'image/jpeg', name: 'random.jpg' }); data.append('idUser', this.state.idUser);
Для отправки просто сделайте:

fetch(uriApi, { method: 'post', body: data }).then((response) => response.json()) .then((responseJson) =>{console.log(responseJson)})

...