предисловие
Как фронтенд реализует загрузку файлов?С развитием фронтенд-технологий будет появляться все больше и больше требований к фронтенду для скачивания файлов.
Увидев, что многие люди в Nuggets в ближайшем будущем будут делиться похожими статьями, я обобщил свой собственный опыт.Согласно разным ситуациям, я обобщил статью общего знания о загрузке файлов с внешнего интерфейса.Любая схема, тогда эта статья будет дать вам очень хорошее вдохновение.
Вариант 1: собственная отправка, серверная часть возвращает файловый поток
Этот метод заключается в использовании form.submit для отправки непосредственно в серверную часть, и серверная часть возвращает файл, сгенерированный файловым потоком.После успешной обработки серверной части он вернется непосредственно на страницу, а браузер отсортирует и откроет ее. собственный механизм сохранения и скачивания файлов.
Достоинства: нет проблем с совместимостью, традиционный способ
Недостатки: я не могу получить время обработки этого процесса серверной частью, и я не могу взаимодействовать и сообщать о ходе выполнения в соответствии с функцией обратного вызова.
// 后端参考代码
return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", HttpUtility.UrlEncode("咨询记录导出.xls", Encoding.GetEncoding("UTF-8")));
// 参考代码
function exportRecord() {
var $form = $("<form>"); //定义一个form表单
$form.hide().attr({target:'',method:'post','action':'/xxx'});
var $input = $("<input>");
$input.attr({"type":"hidden","name":'req'}).val(req);
$form.append($input).appendTo($("body")).submit().remove();
}
Вариант 2: отправка Ajax, серверная часть возвращает адрес онлайн-файла
Используйте ajax или новый axios для отправки запроса, серверная часть вернет адрес онлайн-файла, передняя часть может открыть этот адрес через родной window.open для загрузки; вы также можете установить атрибуты href и download через тег a , и автоматически щелкните, чтобы реализовать его функцию загрузки.Что касается проблемы совместимости, вы можете решить, существует ли атрибут загрузки, чтобы компенсировать это.
Преимущества: вы можете узнать время его возвращения, и вы можете взаимодействовать
Недостаток: в сети хранится большое количество промежуточных временных файлов, которые можно оптимизировать, установив ограничение по времени. Кроме того, вопросы, связанные с конфиденциальностью пользователей, могут быть реализованы с помощью механизмов аутентификации, таких как токены.
// 参考方案
$.ajax({
type: "post",
url: "/xxx",
data: data,
success: function (res) {
tool.loadingend();
if(res.Status){
// window.open或者a标签下载
var isSupportDownload = 'download' in document.createElement('a');
if(isSupportDownload){
var $a = $("<a>") ;
$a.attr({href:res.url,download:'filename'}).hide().appendTo($("body"))[0].click();
}else{
window.open(res.url)
}
}else{
tool.tip(res.Message);
}
}
})
- атрибут загрузки тега
- Решение 2: Дополнительное решение: используйте форму формы для отправки загруженного файла (ajax не может напрямую обрабатывать возвращенный тип файла), который используется для решения ситуации, когда решение window.open перехватывается браузером.
let $form = $("<form>") ;
$form.attr({method:"get",action:res.Message}).hide();
let queryStr = res.Message.split("?")[1];
let queryObj = qs.parse(queryStr) ;
$("body").append($form);
for(let p in queryObj){
let $input =$("<input type='hidden'>") ;
$input.attr({"name":p,value:queryObj[p]}).appendTo($form);
}
$form.submit().remove();
Вариант 3. Внешний интерфейс использует модуль загрузки для загрузки
Сцена поддержки: По сравнению с приведенными выше схемами схема, предоставляемая этим модулем, является более полной, а не ограничивается определенной схемой, и скорость использования очень высока. В исходном коде мы видим, что этот модуль полностью совместим с каждым браузером и поддерживаются ли соответствующие свойства. Соответствующие схемы загрузки файлов включают следующее.
- window.open(url) открывает адрес файла
- Во фрейме iframe установите атрибут src, загрузите файл через iframe и поддержите адрес файла
- Через тег формы установите адрес файла действия, а затем завершите загрузку файла через отправку формы (поддержка двоичного кода).
Краткое содержание программы:Для загрузки обычных адресов файлов совместимость очень хорошая, а для традиционного характера файлового потока его также можно просто поддерживать с помощью тега формы, что можно назвать очень хорошим решением. Конечно, если вам нужно такое комплексное решение, в большинстве случаев можно использовать одно из них.
Программа 4: скачать программу h5 для первокурсников
Я думаю, что Чжан Синьсю представил довольно много из них.Этого должно быть достаточно для начала, поэтому я не буду вводить больше. В дополнение к атрибуту загрузки, предоставляемому тегом a, вводится еще один метод html:blob. Кроме того, вы можете использовать base64 для изображений.
Портал:h5 новый способ загрузки файлов
Личный совет: Хотя новая технология и хороша, используйте ее по назначению, и тут нет никакой совместимости, как и не говорится о каких-то других типах файлов, таких как таблицы, pdf, большие файлы, загрузка видео и аудио и т.д. Поэтому не рекомендуется рассматривать это как очень рутинное решение.
Вариант 5: файл-сохранитель
Адрес модуля:Ежегодный рейтинг Taobao.org/package/FI...Адрес хостинга на гитхабе:GitHub.com/Eli GRE собирается/FI…
Во введении модуля: в нем подробно описывается поддержка браузера, диапазон загрузки, который может поддерживаться, и тип файла, сохраненный как Вместо того, чтобы наступать на гром с базовыми знаниями, рекомендуется использовать зрелое модульное решение для решения требования, связанные с требованиями. Если вы не можете его поддерживать, вернитесь и используйте традиционное решение, чтобы серверная часть предоставляла прямые адреса файлов.Вы должны знать, что в серверной части есть более зрелые технологические пакеты.Для внешнего интерфейса это все еще новое и неопределенное решение, а серверная часть уже получила ответ.
иллюстрировать: нашим предыдущим требованием было загрузить файл таблицы. Предыдущее решение состояло в том, чтобы использовать серверную часть для создания адреса файла, а затем загрузить его. Заданный тип содержимого возвращаемого ответа — application/vnd.ms-excel (обычный тип application/json) . Позже я нашел этот модуль, и базовое использование все еще довольно хорошо. В настоящее время соглашение стало заключаться в том, что бэкэнд генерирует поток двоичных файлов в соответствии с запрошенными данными. Преимущество этого в том, что, если это необходимо, он можно уменьшить в облаке Alibaba или на других серверах большое количество файлов.
расширить мышление: Сталкивались ли вы с подобными потребностями в своей компании? По моему предыдущему опыту, я изначально хотел, чтобы бэкенд возвращал сгенерированный адрес файла, но ответ бэкенда был связан с использованием балансировки нагрузки, и этот адрес запрашивался повторно. Поэтому, предыдущая схема координации внешнего и внутреннего интерфейса размещается в облаке Alibaba, а затем временный файл гарантируется путем установки разрешений и ограничения по времени. Пользователи также могут регенерировать файл без повторного запроса базы данных для аналогичных запросов. , потому что дубликат содержимое данных будет напрямую возвращать адрес файла, который был загружен в Alibaba Cloud.
Анализ исходного кода:В своем исходном коде он в основном требует тип ответа возвращаемого http, а затем обрабатывает возвращенный адрес, который включает важные коды:
//利用a标签下载
var a = document.createElement('a')
a.href = blob
//触发点击事件
node.dispatchEvent(new MouseEvent('click'))
// reader 进行解析
var reader = new FileReader()
var url = reader.result
//得到可解析的地址
_global.URL || _global.webkitURL，
URL.createObjectURL(blob)
//对 cors 跨域是否支持
return xhr.status >= 200 && xhr.status <= 299
Официальное введение filereader:developer.Mozilla.org/this-cn/docs/…
Суммировать
Подводя итог, будь то более традиционное решение, более полный и совместимый способ загрузки в соответствии с адресом файла или новый метод вебапи h5, у вас есть хорошее понимание.Если у вас есть дальнейшее исследование соответствующих точек знаний или решения Если вы заинтересованы, рекомендуется провести глубокую оптимизацию и исследование эффективности для соответствующих статей официального API или двух модулей с открытым исходным кодом.
Я думаю, это неплохо, поставьте лайк и подпишитесь, спасибо за вашу поддержку.