1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/guoshiyu-MyUploader

Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

MyUploader

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

Адрес проекта на сервере: https://github.com/gaoyuyue/MyUploader-Backend

Статус сборки Лицензия GitHub

Краткое описание

Проект разработан с разделением на клиентскую и серверную части и реализует несколько часто используемых функций загрузки файлов. Клиентская часть разработана с использованием Vue.js + Plupload + Element-ui для отправки файлов в браузере, а серверная часть — с использованием Spring Boot + Spring + Spring MVC + MyBatis для приема и хранения файлов на сервере.Этот проект реализует клиентскую часть

Примеры работы

Адрес демонстрации: https://gaoyuyue.github.io/MyUploader

Примечание: статическая страница, созданная с помощью git pages, демонстрирует только функции клиента

Одиночное загрузка файлов

Загрузка нескольких файлов

Загрузка больших файлов

Возобновляемая загрузка

Моментальная загрузка файлов

Загрузка изображений

Реализация клиента

Список компонентов

Включение plupload

Версия plupload: 2.3.6

Официальная документация: https://www.plupload.com/docs/

Документация на русском: http://www.phpin.net/tools/plupload/net/tools/plupload/) Для удобства использования я обернул plupload в Vue-компонент Uploader.vueПример:

<template>
    <div>
      <uploader
        browse_button="browse_button"
        :url="server_config.url+'/File/'"
        @inputUploader="inputUploader"
      />
      <el-button id="browse_button" type="primary">Выберите файл</el-button>
      <span v-for="file in files">{{file.name}}</span>
      <el-button type="danger" @click="up.start()">Начать загрузку</el-button>
    </div>
</template>

<script>
  import Uploader from './Uploader'
  export default {
    name: "FileUpload",
    data() {
      return {
        server_config: this.global.server_config,
        files: [],
        up: {}
      }
    },
    methods: {
      inputUploader(up) {
        this.up = up;
        this.files = up.files;
      }
    },
    components: {
      'uploader': Uploader
    },
  }
</script>

<style scoped>
</style>

Параметры, которые необходимо настроить для использования компонента Uploader:

  • browse_button: id кнопки выбора файла
  • url: адрес загрузки файла
  • метод inputUploader: используется для получения объекта uploader

Для получения объекта uploader, был создан метод inputUploader, который необходимо реализовать в компоненте, использующем Uploader.vue. В методе inputUploader передается один параметр - объект uploader. Описание объекта uploader и других параметров конфигурации см. в официальной документации plupload

Вычисление MD5-хэша файла (для быстрой загрузки файлов)

Используется js-spark-md5.js, проект: https://github.com/satazor/js-spark-md5

file-md5.js

'use strict';

import '../plugins/js-spark-md5.js'

export default function (file, callback) {
  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
      file = file,
      chunkSize = 2097152,                             // Чтение в блоках по 2MB
      chunks = Math.ceil(file.size / chunkSize),
      currentChunk = 0,
      spark = new SparkMD5.ArrayBuffer(),
      fileReader = new FileReader();
```  fileReader.onload = function (e) {
    console.log('чтение блока номер', currentChunk + 1, 'из', chunks);
    spark.append(e.target.result);                   // Добавление массива байтов
    currentChunk++;    if (currentChunk < chunks) {
      loadNext();
    } else {
      callback(null, spark.end());
      console.log('загрузка завершена');
    }
  };

  fileReader.onerror = function () {
    callback('ошибка, что-то пошло не так.');
  };

  function loadNext() {
    var start = currentChunk * chunkSize,
      end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  }

  loadNext();
};

Файловый секционный загрузчик: После добавления файла вычисляется его MD5-хэш. Перед началом загрузки файла его MD5-хэш отправляется на сервер для проверки наличия файла. Если файл уже существует, возвращается значение false и статус файла устанавливается как загруженный, в противном случае файл загружается.

Предварительный просмотр изображений

Используется FileReader для чтения файла и преобразования его в строку Base64, которая затем используется для заполнения атрибута src тега <img/>, что позволяет реализовать функцию предварительного просмотра изображений.

file-url.js

export default function (file, callback) {
  if (!file || !/image\//.test(file.type)) return;
  let fileReader = new FileReader();
  fileReader.onload = function () {
    callback(null, fileReader.result);
  };
  fileReader.onerror = function () {
    callback('ошибка, что-то пошло не так.');
  };
  fileReader.readAsDataURL(file);
}

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Одиночная загрузка файла, загрузка нескольких файлов, загрузка крупных файлов, возобновляемая загрузка, мгновенная загрузка файла, загрузка изображений Развернуть Свернуть
Apache-2.0
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/guoshiyu-MyUploader.git
git@api.gitlife.ru:oschina-mirror/guoshiyu-MyUploader.git
oschina-mirror
guoshiyu-MyUploader
guoshiyu-MyUploader
master