Как отправить картинку fetch запросом?

Question

[historydev]

Добрый вечер.Скажите пожалуйста какие настройки прописать,чтобы я мог передать картинку и данные из остальных инпутов одним запросом.Сейчас я использую 2 формы для отправки 2 типов данных и это никуда не годится..Принимаю на сервере картинку с помощью multer
Вот допустим мой запрос для обычных данных:

async function sendUser(url,name,email,role,password) {
		this.url = url
		this.name = name
		this.email = email
		this.role = role
		this.password = password
		this.options = {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: 
			JSON.stringify({
				firstname: this.name,
				email: this.email,
				role: this.role,
				password: this.password
			})			
		}

		const response = await fetch(this.url,this.options)
		const data = await response.json()

		if(data) document.location.replace(`${data.step}`)
}

Comments

[Mikhail Osher]

google "js fetch send image and json"

[historydev]

Mikhail Osher, погуглил,вот что вышло,но я неправильно получаю файл,помогите пожалуйста.

async function sendImg(url) {
		this.url = url

		let data = new FormData()

		let input = $('#file').val()

		data.append('file', input.files[0])
		data.append('name', 'hubot')

		this.options = {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: data	
		}

		const response = await fetch(this.url,this.options)
		const res = await response.json()

	}

$(document).on('click','.click', (e) => {
	sendImg('/upload')
})

<input type="file" id="file" multiple><button class="click">Submit</button>

Uncaught (in promise) TypeError: Cannot read property '0' of undefined
at sendImg (index.js:15)
at HTMLButtonElement. (index.js:32)
at HTMLDocument.dispatch (jquery.min.js:2)
at HTMLDocument.v.handle (jquery.min.js:

[historydev]

Mikhail Osher, выше поправил,теперь мне пишет "слишком большой объект запроса"

PayloadTooLargeError: request entity too large

[historydev]

Mikhail Osher, короче выгуглил все,сделал сам,спасибо за пинок моей лени.Пишите в ответ.

Answer 1

[Mikhail Osher]

Используйте FormData. Заголовок Content-Type выставлять не нужно.

Answer 2

[Дмитрий Комчев]

Fetch API