MyUploader

Мой загрузчик

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

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

Введение

Проект разработан с использованием метода разделения клиентской и серверной части и реализует несколько часто используемых функций загрузки файлов. Фронтенд использует vue.js + plupload + element-ui для реализации отправки файлов на стороне браузера, а бэкэнд использует Spring Boot + Spring + Spring MVC + Mybatis для реализации приема и хранения файлов на стороне браузера. серверная часть.

Этот проект представляет собой интерфейсную реализацию

визуализации

Адрес демо: https://gaoyuyue.github.io/MyUploader

ps: Статические страницы, созданные с помощью git-страниц, могут демонстрировать только функции внешнего интерфейса.

Загрузка одного файла

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

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

Возобновить загрузку с точки останова

Передача файлов за секунды

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

Фронтальная реализация

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

• Загрузка одного файла (включая функцию фильтрации файлов): SingleFileUpload.vue
• Загрузка нескольких файлов: MultiFileUpload.vue
• Загрузка большого файла: BigFileUpload.vue
• Возобновить загрузку с точки останова: StopUpload.vue
• Передача файлов за считанные секунды: QuickUpload.vue
• Загрузка изображения: PictureUpload.vue

Представляем plupload

версия для загрузки: 2.3.6

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

Китайская документация: http://www.phpin.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: выберите идентификатор кнопки файла.
• URL: адрес загрузки файла
• Метод inputUploader: используется для получения объекта загрузчика.

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

Вычислить значение MD5 файла (используется для передачи файлов)

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

файл-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 ,                             // Read in chunks of 2MB
    chunks = Math . ceil ( file . size / chunkSize ) ,
    currentChunk = 0 ,
    spark = new SparkMD5 . ArrayBuffer ( ) ,
    fileReader = new FileReader ( ) ;

  fileReader . onload = function ( e ) {
    console . log ( 'read chunk nr' , currentChunk + 1 , 'of' , chunks ) ;
    spark . append ( e . target . result ) ;                   // Append array buffer
    currentChunk ++ ;

    if ( currentChunk < chunks ) {
      loadNext ( ) ;
    } else {
      callback ( null , spark . end ( ) ) ;
      console . log ( 'finished loading' ) ;
    }
  } ;

  fileReader . onerror = function ( ) {
    callback ( 'oops, something went wrong.' ) ;
  } ;

  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 тега <image/> , чтобы реализовать функцию предварительного просмотра изображения.

файл-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 ( 'oops, something went wrong.' ) ;
  } ;
  fileReader . readAsDataURL ( file ) ;
}