Использование axios для реализации функции прогресс-бара загрузки изображений

Axios - это HTTP-библиотека на основе promise, которую можно использовать в браузерах и node.js.

Возможности

Создание XMLHttpRequests из браузера

Создание HTTP-запросов из node.js

Поддержка API Promise

Интерцепция запросов и ответов

Преобразование данных запроса и ответа

Отменить запрос

Автоматическое преобразование данных JSON

Клиент поддерживает защиту от XSRF

Ниже я介绍一下如何使用axios для реализации функции индикатора прогресса загрузки изображений, подробное описание приведено ниже:

　В последнем проекте, над которым я работал, на одной странице телефона можно загрузить до нескольких десятков изображений, хотя фотографии были сжаты, но в конечном итоге они все еще были очень большими. Если использовать网卡上传， время загрузки будет очень плохим, и если пользователь будет в режиме загрузки, он не будет знать, сколько изображений он уже загрузил. Чтобы более直观적으로 показать прогресс загрузки, лучше всего отображать индикатор прогресса и процент загрузки;

　　Проект использует фреймворк vuejs, mint-ui в качестве фреймворка ui; запрашивает axios, рекомендованный официальным vue (на самом деле он очень силен); в официальном руководстве axios介绍了 использование nativeСобытие прогресса загрузки（Подробнее см. здесь, здесь есть китайский обзор официальной документации axios）：

 onUploadProgress: function (progressEvent) {
  //Обработка原生 события прогресса загрузки
 ,

　　Поскольку используется vuejs, для удобства управления и управления данными запросов к интерфейсу, необходимо统一 управлять. Если их размещать в каждом компоненте, это не будет удобно для поддержки и управления в будущем; в файле reqwest.js определен метод uploadPhoto, который имеет три параметра: параметры, и два回调 функции, параметры это необходимые параметры для загрузки изображения; а первый回调 функция, это получение данных прогресса загрузки,第二个回调 функция, это получение данных успеха или неудачи загрузки, возвращаемых сервером, для выполнения下一步 действий на странице.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //Событие原生 получения прогресса загрузки
        if(progressEvent.lengthComputable){
          //Атрибут lengthComputable в основном указывает на то, можно ли измерить общее количество работы и количество выполненной работы
          //Если lengthComputable равен false, то не удается получить progressEvent.total и progressEvent.loaded
          callback1(progressEvent);
        }
      ,
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    )
  }

Использование компонента Progress из библиотеки mint-ui, в методе data определяем переменную componenta precent, переменная этого типа number, при определении, обратите внимание;　

<mt-progress :value="precent" :bar-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

Импортируйте файл reqwest.js, чтобы получить метод uploadPhoto, и обновляйте страницу в реальном времени, используя атрибут $nextTick, на основе полученного прогресса загрузки.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   )
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('Успешная загрузка изображения').then(action => {
     console.log('ok');
    });
  }
)

　　Основываясь на вышеуказанных методах, мы можем基本上 реализовать отображение прогресса загрузки изображения и percentages. Оставшаяся часть - это ui, которую можно настроить индивидуально для достижения ваших完美 требований...

Обобщение

Как уже было сказано,小编介绍了如何使用axios实现上传图片进度条功能，希望对大家有所帮助。如果您有任何疑问， пожалуйста, оставьте комментарий, и я отвечу вам своевременно. В этом также выражаю благодарность всем, кто поддерживает сайт呐喊教程！

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен и выложен самостоятельно. Этот сайт не имеет права собственности на него, не редактировался вручную и не несет ответственности за него. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @), чтобы сообщить о нарушении, и предоставьте соответствующие доказательства. Если нарушение будет подтверждено, сайт немедленно удалит涉嫌侵权的内容。