Работа над загрузкой файла на сервер

client/api/reader.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import {sleep} from '../share/utils';
 
+const maxFileUploadSize = 10*1024*1024;
 const api = axios.create({
   baseURL: '/api/reader'
 });
@@ -65,6 +66,36 @@ class Reader {
         //загрузка
         return await axios.get(url, options);
     }
+
+    async uploadFile(file, callback) {
+        if (file.size > maxFileUploadSize)
+            throw new Error(`Размер файла превышает ${maxFileUploadSize} байт`);
+
+        let formData = new FormData();
+        formData.append('file', file);
+
+        const options = {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            },
+            onUploadProgress: progress => {
+                const total = (progress.total ? progress.total : progress.loaded + 200000);
+                if (callback)
+                    callback({state: 'upload', progress: Math.round((progress.loaded*100)/total)});
+            }
+
+        };
+
+        let response = await api.post('/upload-file', formData, options);
+        if (response.data.state == 'error')
+            throw new Error(response.data.error);
+
+        const url = response.data.url;
+        if (!url) 
+            throw new Error('Неверный ответ api');
+
+        return url;
+    }
 }
 
 export default new Reader();

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -10,7 +10,8 @@
                 <el-button slot="append" icon="el-icon-check" @click="submitUrl"></el-button>
             </el-input>
             <div class="space"></div>
-            <el-button size="mini" @click="loadFle">
+            <input type="file" id="file" ref="file" @change="loadFile" style='display: none;'/>
+            <el-button size="mini" @click="loadFileClick">
                 Загрузить файл с диска
             </el-button>
             <div class="space"></div>
@@ -66,7 +67,13 @@ class LoaderPage extends Vue {
         }
     }
 
-    loadFle() {
+    loadFileClick() {
+        this.$refs.file.click();
+    }
+
+    loadFile() {
+        const file = this.$refs.file.files[0];
+        this.$emit('load-file', {file});
     }
 
     openHelp() {

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -21,6 +21,7 @@ const ruMessage = {
     'convert': 'конвертирование',
     'loading': 'загрузка',
     'parse': 'обработка',
+    'upload': 'отправка',
 };
 
 export default @Component({

client/components/Reader/Reader.vue

@@ -50,6 +50,7 @@
             <keep-alive>
                 <component ref="page" :is="activePage"
                     @load-book="loadBook"
+                    @load-file="loadFile"
                     @book-pos-changed="bookPosChanged"
                     @tool-bar-toggle="toolBarToggle"
                     @full-screen-toogle="fullScreenToggle"
@@ -647,6 +648,29 @@ class Reader extends Vue {
         });
     }
 
+    loadFile(opts) {
+        this.progressActive = true;
+        this.$nextTick(async() => {
+            const progress = this.$refs.page;
+            try {
+                progress.show();
+                progress.setState({state: 'upload'});
+
+                const url = await readerApi.uploadFile(opts.file, (state) => {
+                    progress.setState(state);
+                });
+
+                this.loadBook(url);
+
+                progress.hide(); this.progressActive = false;
+            } catch (e) {
+                progress.hide(); this.progressActive = false;
+                this.loaderActive = true;
+                this.$alert(e.message, 'Ошибка', {type: 'error'});
+            }
+        });
+    }
+
     blinkCachedLoadMessage() {
         this.blinkCount = 30;
         if (!this.inBlink) {