Как реализовать перетаскивание загрузки, индикатор выполнения загрузки и отмену загрузки?

внешний интерфейс JavaScript
Как реализовать перетаскивание загрузки, индикатор выполнения загрузки и отмену загрузки?

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Загрузка файла — одно из самых распространенных бизнес-требований. Функция загрузки может быть простой или сложной. Простая вещь — загрузить файл. Сложная вещь включает в себя возобновление загрузки больших файлов, контроль параллелизма и т. д. Я не знаю сколько все знают о загрузке. Сегодня я хочу поделиться с вами некоторыми из наиболее распространенных сценариев загрузки требований. Без лишних слов, давайте начнем:

перетащить загрузить

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

  1. dragover — срабатывает, когда перетаскиваемый объект входит в целевой контейнер
  2. dragleave — срабатывает, когда перетаскиваемый объект покидает целевой контейнер
  3. drop — перетаскиваемый объект попадает в целевой контейнер, срабатывает при отпускании кнопки мыши

После понимания этих событий довольно легко реализовать загрузку с помощью перетаскивания. Сначала о рендерах:

Показать результаты

image.png image.pngКогда перетаскиваемый объект входит в целевой контейнер, граница контейнера становится красной. Когда целевой контейнер перетаскивается или отпускается кнопка мыши, граница контейнера становится серой. Получает информацию о файле перетаскиваемого объекта при отпускании кнопки мыши.

Код

<template>
  <div ref="drag" class="drag">
    <div class="drag-icon-box">
      <!-- 采用的是 element-ui 的图标 -->
      <i class="el-icon-upload"></i> 
    </div>
    <div class="drag-message">
      <span class="drag-message-title">将文件拖动到此处，或</span>
      <label for="file" class="drag-message-label">
        <input
          class="drag-message-input"
          type="file"
          id="file"
          name="file"
          @change="handleFileChange"
        />
        <span class="drag-message-manual">点击上传</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  async mounted() {
    // 给容器绑定相关的拖拽事件
    this.bindEvents()
  },
  methods: {
    bindEvents() {
      const drag = this.$refs.drag
      // 被拖动的对象进入目标容器
      drag.addEventListener('dragover', e => {
        e.preventDefault()
        drag.style.borderColor = 'red'
      })
      // 被拖动的对象离开目标容器
      drag.addEventListener('dragleave', e => {
        e.preventDefault()
        drag.style.borderColor = '#eee'
      })
      // 被拖动的对象进入目标容器，释放鼠标键
      drag.addEventListener('drop', e => {
        e.preventDefault()
        drag.style.borderColor = '#eee'
        const fileList = e.dataTransfer.files
        this.file = fileList[0]
        this.uploadFile()
      })
    },
    async uploadFile() {
      const form = new FormData()
      form.append('name', 'file')
      form.append('file', this.file)
      const res = await axios.post('/upload', form)
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
      this.uploadFile()
    }
  }
}
</script>

<style lang="scss" scoped>
.drag {
  width: 660px;
  height: 300px;
  border: 2px dashed;
  border-color: #a3a3a3;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .drag-icon-box {
    width: 100%;
    height: 60px;
    text-align: center;
    font-size: 50px;
    line-height: 60px;
    color: #606266;
  }
  .drag-message {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    .drag-message-title {
      font-size: 14px;
      color: #606266;
    }
    .drag-message-label {
      width: 120px;
      height: 50px;
      height: auto;
      position: relative;
      overflow: hidden;
      .drag-message-input {
        position: absolute;
        left: -100px;
        top: -100px;
        z-index: -1;
        display: none;
      }
      .drag-message-manual {
        font-size: 14px;
        color: #4b87ff;
        cursor: pointer;
      }
    }
  }
}
</style>

загрузить индикатор выполнения

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

Показать результаты

image.png

Код

<div>
  <!-- 采用的是 element-ui 的进度条组件 -->
  <el-progress
    :stroke-width="20"
    :text-inside="true"
    :percentage="uploadProgress"
  ></el-progress>
</div>

<script>
export default {
  data() {
    return {
      file: null,
      uploadProgress: 0
    }
  },
  methods: {
    async uploadFile() {
      const form = new FormData()
      form.append('name', 'file')
      form.append('file', this.file)
      const res = await axios.post('/uploadfile', form, {
        onUploadProgress: progress => {
          this.uploadProgress = Number(
            ((progress.loaded / progress.total) * 100).toFixed(2)
          )
        }
      })
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
      this.uploadFile()
    }
  }
}
</script>

отменить загрузку

Когда загрузка идет медленно и так хочется поймать или щелкнуть рукой, загруженное видео не должно быть загружено (вы знаете), в случае ожидания загрузки, возможность его отменить? Ответ конечно возможен.

Показать результаты

image.pngПо сути, отмена загрузки — это отменаajaxзапрос, доступенaxiosизcancel tokenотменить.

Способ 1: ИспользованиеCancelToken.sourceСоздание фабричного методаcancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/upload', form, {
  cancelToken: source.token
})

source.cancel();

Метод два: Функция передачи в ИсполнительCancelTokenконструктор для созданияcancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.post('/upload', form, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

cancel();

Заинтересованные студенты могут попробовать и включить описанные выше методы в свои проекты.

Суммировать

хорошо, выше приведены некоторые из наиболее распространенных сценариев в требованиях к загрузке.Будь то загрузка с помощью перетаскивания или загрузка с вставкой, самое главное — получить информацию о файле через соответствующее событие. И индикатор выполнения и отмена загрузки используютсяaxiosизapiреализовать,axiosТак же есть много практичных вариантов комплектации, можете изучить сами.

Добро пожаловать, чтобы оставить сообщение в области комментариев, официальный представитель Nuggets будет вПроект «Звезда раскопок»После события 100 штук Наггетсов будут разыграны в области комментариев. Если статья была вам полезна, не забудьте поставить лайк~

Я слышал, что людям, которые любят ставить лайки, не везет, я верю, что в этом году ты сдашь все экзамены и выиграешь все призы😘

Категории