Я все еще пытаюсь обернуть голову вокруг этого.
Я могу предложить пользователю выбрать файл (или даже несколько) с помощью ввода файла:
<form>
<div>
<label>Select file to upload</label>
<input type="file">
</div>
<button type="submit">Convert</button>
</form>
И я могу поймать submit
событие, используя <fill in your event handler here>
. Но как только я это сделаю, как мне отправить файл с помощью fetch
?
fetch('/files', {
method: 'post',
// what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);
javascript
fetch-api
Дейч
источник
источник
Content-Type: multipart/form-data
Ответы:
Это базовый пример с комментариями.
upload
Функция то , что вы ищете:источник
Я сделал это так:
источник
FormData
объект, если все, что вы загружаете, это файл (именно этого и требует исходный вопрос).fetch
приметinput.files[0]
выше в качестве егоbody
параметра.Важное примечание для отправки файлов с помощью Fetch API
Нужно опустить
content-type
заголовок для запроса Fetch. Затем браузер автоматически добавитContent type
заголовок, включая границу формы, которая выглядит какГраница формы - это разделитель для данных формы
источник
Если вы хотите несколько файлов, вы можете использовать это
источник
Чтобы отправить один файл, вы можете просто использовать
File
объект изinput
«S.files
массива непосредственно в качестве значенияbody:
в вашемfetch()
инициализаторе:Это работает, потому что
File
наследуется отBlob
иBlob
является одним из допустимыхBodyInit
типов, определенных в Стандарте выборки.источник
body: myInput.files[0]
влияет количество байтов, хранящихся в памяти на стороне клиента?express-fileupload
не удалось проанализировать поток запросов. НоFormData
работает как шарм.express-fileupload
это серверная библиотека для обработкиmultipart/form-data
запросов, содержащих файлы, так что да, она не совместима с этим подходом (который просто напрямую отправляет файл как тело запроса).Принятый ответ здесь немного устарел. По состоянию на апрель 2020 года рекомендуемый подход, представленный на веб-сайте MDN, предполагает использование,
FormData
а также не требует установки типа контента. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_FetchЯ привожу фрагмент кода для удобства:
источник
FormData
будет работать, только если сервер ожидает данные формы. Если серверу нужен необработанный файл в качестве тела сообщения POST, принятый ответ правильный.Прыжки с подхода Алекса Монтойи для нескольких элементов ввода файлов
источник
Проблема для меня заключалась в том, что я использовал response.blob () для заполнения данных формы. По-видимому, вы не можете сделать это, по крайней мере, с реагировать родной, поэтому я в конечном итоге с помощью
Кажется, что Fetch распознает этот формат и отправляет файл, куда указывает URI.
источник
Вот мой код:
HTML:
источник