Webupload-vue

Введение

Использование Vue, ElementUI и Webupload для создания плагина для загрузки больших файлов по частям. Поддерживает возобновление передачи, проверку MD5 файла и фрагментов, успешную первую загрузку и мгновенную передачу одного и того же файла.

Адрес бэкенда: https://gitee.com/hhjNavy/webupload.git. Плагин находится в файле src/components/common/upload/WebUpload.vue. Демонстрация: src/components/page/sys/FileList.vue.

Эффектные изображения

Демонстрация эффекта

1. Клонируйте проект на локальный компьютер. Необходимо объединить его с демонстрацией бэкэнда. Для этого нужно клонировать весь бэкэнд-проект: https://gitee.com/hhjNavy/webupload.git
2. Установите все необходимые зависимости и запустите клиентскую и серверную части.
3. Перейдите по адресу http://localhost:8081/#/filelist, чтобы самостоятельно протестировать плагин.

Инструкция по использованию

1. Скопируйте файл WebUpload.vue из папки src/components/common/upload в свой проект. Также скопируйте файл Uploader.swf в папку со статическими ресурсами вашего проекта. Установите пакеты webuploader и jquery:

cnpm i webuploader -S    
cnpm i jquery -S  

2. Предоставьте соответствующие интерфейсы и параметры на бэкэнде. На клиентской стороне импортируйте WebUpload.vue, а на серверной стороне обратитесь к файлу https://gitee.com/hhjNavy/webupload.git и файлу клиентской стороны src/components/page/sys/FileList.vue. class="dialog-footer"> <el-button type="primary" @click="saveEdit">确 定

    <!--图片查看-->
    <el-dialog title="Картинка для просмотра" :visible.sync="showImgVisible" width="800px">
        <el-image
                v-if="imageUrl"
                class="avatar"npm
                :src="imageUrl"
                :preview-src-list="[imageUrl]"
        ></el-image>
        <span slot="footer" class="dialog-footer">
            <!--<el-button @click="editVisible = false">取 消</el-button>-->
            <el-button type="primary" @click="showImgVisible=false;imageUrl=''">Зак рыть</el-button>
        </span>
    </el-dialog>
   
    <!--Excel экспорт-->