Как отправить файл через js на сервер?

Question

[viktorross]

Здравствуйте, пытаюсь отправить файл на сервер для загрузки в папку, но ничего не выходит, как в php нужно обработать массив media, чтобы извлечь оттуда файл и загрузить в папку? Попробовал массу вариантов, не сработало, возможно есть какие-то нюансы

const form = new FormData();
		const file = document.querySelector('#sendMessasgeFile').files[0];
		form.append('upfile', file);
				var data = {
					userId: user_id,
					media:form,
					command:'private'
				};
				conn.send(JSON.stringify(data));

Comments

[Ivan Ustûžanin]

что такое conn?

[viktorross]

IvanU7n, это websocket, вы правы, в этом и причина видимо

[Ivan Ustûžanin]

viktorross, тогда нужно две отправки, одна с информацией о файле, вторая с самим файлов в виде бинарных данных, т.е. можно прямо сделать

conn.send(document.querySelector('#sendMessasgeFile').files[0])

предварительно отправив имя, тип, размер и т.п., чтобы на сервере собрать это дело обратно

[viktorross]

IvanU7n, спасибо, это уже увидел, не понятно только теперь как превратить файл в бинарные данные, я так понял с помощью arraybuffer, но больше информации не нашел по поводу его применения в моем случае и тем более как в php обратно собрать в файл

Answer 1

[Сергей delphinpro]

непонятно, что представляет собой conn, поэтому попробую просто угадать

const form = new FormData();
const file = document.querySelector('#sendMessasgeFile').files[0];
form.append('media', file);
form.append('userId', user_id);
form.append('command', 'private');
conn.send(form);

Comments

[Ivan Ustûžanin]

а если conn это что-то типа WebSocket-соединения, то с отправкой файлов получится "ой"

[viktorross]

Сергей delphinpro conn это подключение в websocket, в целом media отправляется и в моем варианте на сервер в качестве массива, вопрос в другом, как из этого массива извлечь правильно файл, потому что я пытался по разному, но в бд идет вставка либо array, либо null ..

[Михаил Р.]

IvanU7n, кажется, все таки ой

[Mikhail Osher]

А точно надо файлы по websocket гонять? Если да, то может какие base64 или ArrayBuffer как тут

[viktorross]

Михаил Р., Mikhail Osher
удалось преобразовать файл с помощью Uint8Array, теперь задача превратить эти данные в файл на стороне сервера

Uint8Array(200553) [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 1, 0, 96, 0, 96, 0, 0, 255, 219, 0, 67, 0, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 3, 2, 2, 3, 3, 6, 4, 3, 3, 3, 3, 7, 5, 5, 4, 6, 8, 7, 9, 8, 8, 7, 8, 8, 9, 10, 13, 11, 9, 10, 12, 10, 8, 8, 11, 15, 11, 12, 13, 14, 14, 15, 14, 9, 11, 16, 17, 16, 14, 17, 13, 14, 14, 14, 255, 219, 0, 67, 1, 2, 3, 3, 3, 3, 3 ........

[Ivan Ustûžanin]

viktorross, зачем преобразовывать, если send() вебсокета умеет отправлять Blob (а File это частный случай Blob-a) в виде потока байт — на клиенте вначале читаете метаинформацию о файле, а потом в отдельном бинарном сообщении придут байтики этого файла

[Ivan Ustûžanin]

viktorross, ну или найти один из вариантов конвертации ArrayBuffer/Uint8Array в base64 и протолкнуть этот base64 с прочими полями

а преобразовывать можно чем-то типа

window.base64 = {
ABC: [
	'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
	'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
	'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
	'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
	'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/', '=',
],
fromBuffer(input) {
	const bytes = new Uint8Array(input);
	const chars = new Array(Math.ceil(bytes.length * 4 / 3));
	for (let targetIdx = 0, sourceIdx = 0; sourceIdx < bytes.length; sourceIdx += 3) {
		const [ byte1, byte2, byte3, ] = bytes.subarray(sourceIdx, sourceIdx + 3);
		const haveByte2 = Number.isInteger(byte2);
		const haveByte3 = haveByte2 && Number.isInteger(byte3);
		chars[targetIdx++] = this.ABC[byte1 >> 2 & 0x3F];
		chars[targetIdx++] = this.ABC[byte1 << 4 & 0x30 | (haveByte2 ? byte2 >> 4 & 0x0F : 0)];
		chars[targetIdx++] = this.ABC[haveByte2 ? byte2 << 2 & 0x3C | (haveByte3 ? byte3 >> 6 & 0x03 : 0) : 64];
		chars[targetIdx++] = this.ABC[haveByte3 ? byte3 << 0 & 0x3F : 64];
	}
	return chars.join('');
},
toBuffer(input) {
	const chars = input.replace(/[^A-Za-z0-9\+\/]/g, '');
	const bytes = new Uint8Array(Math.floor(chars.length * 3 / 4));
	for (let targetIdx = 0, sourceIdx = 0; sourceIdx < chars.length; sourceIdx += 4) {
		const [ char1, char2, char3, char4, ] = Array.from(chars.substring(sourceIdx, sourceIdx + 4), item => this.ABC.indexOf(item));
		const haveChar3 = Number.isInteger(char3);
		const haveChar4 = haveChar3 && Number.isInteger(char4);
		bytes[targetIdx++] = char1 << 2 & 0xFC | char2 >> 4 & 0x03;
		if (haveChar3) bytes[targetIdx++] = char2 << 4 & 0xF0 | char3 >> 2 & 0x0F;
		if (haveChar4) bytes[targetIdx++] = char3 << 6 & 0xC0 | char4 >> 0 & 0x3F;
	}
	return bytes.buffer;
},
};