Во Vue.js, если в сетевом запросе используются axios и используется библиотека ElementUI, то в целом есть две разные реализации для загрузки файлов:

Загрузка файла через Ajax
Загрузка файла через компонент Upload в Element UI

Оба варианта имеют свои преимущества и недостатки, поэтому рассмотрим их по отдельности.

Готов к работе

Прежде всего, нам нужно немного подготовиться, а именно предоставить интерфейс загрузки файлов на серверной части, который является общим проектом Spring Boot, следующим образом:

SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/import")
public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {
    String format = sdf.format(new Date());
    String realPath = req.getServletContext().getRealPath("/upload") + format;
    File folder = new File(realPath);
    if (!folder.exists()) {
        folder.mkdirs();
    }
    String oldName = file.getOriginalFilename();
    String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
    file.transferTo(new File(folder,newName));
    String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;
    System.out.println(url);
    return RespBean.ok("上传成功!");
}

Загрузка файлов здесь относительно проста, загруженные файлы классифицируются по дате, используя UUID для переименования файла.

Чтобы упростить код здесь, я опускаю захват исключений, и результат загрузки напрямую возвращает успех, и каждый во внутреннем коде может изменить его в соответствии со своей реальной ситуацией.

Ajax-загрузка

В Vue загрузка файлов реализована через Ajax.Решение в основном такое же, как и традиционная реализация загрузки файлов через Ajax.Единственная разница заключается в способе поиска элементов.

<input type="file" ref="myfile">
<el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">导入数据</el-button>

Здесь сначала укажите файл для импорта компонента ввода, а затем кнопку импорта для завершения логики импорта в случае кнопки импорта.

importData() {
  let myfile = this.$refs.myfile;
  let files = myfile.files;
  let file = files[0];
  var formData = new FormData();
  formData.append("file", file);
  this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{
    if (resp) {
      console.log(resp);
    }
  })
}

Основная логика этой загрузки объясняется следующим образом:

Во-первых, используйте $refs в Vue, чтобы найти элемент, в котором хранится файл.
Тип имеет массив файлов внутри элемента INPUT файла, и все выбранные файлы сохраняются.Поскольку файл загружается, файл может быть множественным выбором, поэтому объект Files, полученный здесь, представляет собой массив.
Из объекта файлов получите файл, который хотите загрузить.Поскольку это единственный выбор, фактически это первый элемент в массиве.
Создайте FormData для хранения загруженных данных. FormData не может использовать конфигурацию цепочки, такую как StringBuffer в Java.
После построения FromData вы можете загружать данные напрямую. FormData — это данные, которые нужно загрузить.
Обратите внимание на два момента при загрузке файлов, 1. Способ запроса пост, 2. НастройкаContent-Typeзаmultipart/form-data.

Этот файл загружается. На самом деле это традиционный файл загрузки AJAX. Он отличается от обычного jQuery. Здесь отличается то, что элементы выглядят по-другому (в реальных элементах), вы можете реализовать это на JavaScript. Другие способы написания точно так же. Этот подход является универсальным способом, в котором используется передняя часть рамы. Наконец, давайте посмотрим на метод загрузки пакета:

export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

После этих шагов настройки, даже если внешняя загрузка завершена, файл можно загрузить.

Используйте компонент загрузки

Если вы используете загрузку, вам необходимо ввести ElementUI, поэтому обычно рекомендуется, если вы используете ElementUI в качестве элемента управления пользовательского интерфейса, вы можете рассмотреть возможность использования компонента загрузки для загрузки файлов.Если вы не используете ElementUI, не рекомендуется использовать Компонент загрузки Как и для других интерфейсов Каждый из элементов управления имеет свой собственный компонент загрузки файлов Для конкретного использования, пожалуйста, обратитесь к соответствующей документации.

<el-upload
  style="display: inline"
  :show-file-list="false"
  :on-success="onSuccess"
  :on-error="onError"
  :before-upload="beforeUpload"
  action="/system/basic/jl/import">
  <el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
</el-upload>

show-file-list Указывает, отображать ли список загруженных файлов, значение по умолчанию — true, здесь установлено не отображать.
before-upload представляет собой обратный вызов перед загрузкой. В этом методе можно выполнить некоторую подготовительную работу, например показать пользователю индикатор выполнения.
при успешном выполнении и при ошибке представляют собой обратные вызовы при успешной и неудачной загрузке соответственно. Вы можете дать пользователю соответствующий запрос в этих двух методах. Если есть индикатор выполнения, вам нужно закрыть индикатор выполнения в этих двух методах. .
действие относится к адресу загрузки файла.
Статус щелчка и значки кнопки загрузки устанавливаются в переменную.Во время загрузки файла статус нажатия кнопки загрузки изменяется, не нажимается, а значок модификатора представляет собой значок, который загружается как загрузка.
Загружаемый текст также задается как переменная, текст кнопки загрузки по умолчанию数据导入, когда начнется загрузка, измените текст на кнопке на正在导入.

Соответствующий обратный вызов выглядит следующим образом:

onSuccess(response, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = 'el-icon-upload2';
  this.btnText = '数据导入';
},
onError(err, file, fileList) {
  this.enabledUploadBtn = true;
  this.uploadBtnIcon = 'el-icon-upload2';
  this.btnText = '数据导入';
},
beforeUpload(file) {
  this.enabledUploadBtn = false;
  this.uploadBtnIcon = 'el-icon-loading';
  this.btnText = '正在导入';
}

Когда файл начнет загружаться, измените кнопку загрузки, чтобы она не нажималась, а также измените значок и текст кнопки загрузки.
Когда загрузка файла завершается успешно или неудачно, измените статус кнопки загрузки на активную и восстановите значок и текст кнопки загрузки.

Загруженные рендеры выглядят следующим образом:

Суммировать

Оба метода загрузки имеют свои преимущества и недостатки:

Самый большой плюс первого способа в том, что он универсален, один прием можно использовать везде, но логику отслеживания процесса загрузки и отображения индикатора прогресса нужно реализовывать самостоятельно.
Второй способ недостаточно универсален, т.к. он является компонентом в ElementUI и может быть использован только при введении ElementUI, но этот способ явно нуждается в более удобных обратных вызовах, что может быть очень удобно для решения различных распространенных проблем с загрузкой.
Второй метод может соответствовать общим требованиям загрузки, но если вы хотите настроить метод загрузки, рекомендуется использовать первый метод загрузки.

Обратите внимание на общедоступный номер [Jiangnan A Little Rain], сосредоточьтесь на полнофункциональных технологиях, таких как Spring Boot + микросервисы и разделение интерфейсной и серверной части, делитесь регулярными видеоуроками, отвечайте на Java после подписки и получайте Java галантереи, тщательно подготовленные Songge для вас!