Одиночное загрузка файлов, загрузка нескольких файлов, загрузка больших файлов, возобновляемая загрузка, моментальная загрузка файлов, загрузка изображений
Адрес проекта на сервере: https://github.com/gaoyuyue/MyUploader-Backend
Проект разработан с разделением на клиентскую и серверную части и реализует несколько часто используемых функций загрузки файлов. Клиентская часть разработана с использованием Vue.js + Plupload + Element-ui для отправки файлов в браузере, а серверная часть — с использованием Spring Boot + Spring + Spring MVC + MyBatis для приема и хранения файлов на сервере.Этот проект реализует клиентскую часть
Адрес демонстрации: https://gaoyuyue.github.io/MyUploader
Примечание: статическая страница, созданная с помощью git pages, демонстрирует только функции клиента
Версия 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, был создан метод inputUploader, который необходимо реализовать в компоненте, использующем Uploader.vue. В методе inputUploader передается один параметр - объект uploader. Описание объекта uploader и других параметров конфигурации см. в официальной документации plupload
Используется 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 )