From 01d9156694fecf7dc8d4c975ee76b79f088e783c Mon Sep 17 00:00:00 2001
From: klausY <emosick@qq.com>
Date: Mon, 25 Nov 2019 11:36:12 +0800
Subject: [PATCH] =?UTF-8?q?form=E8=A1=A8=E5=8D=95=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/view/example/excel/excel.vue          | 42 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/QMPlusVuePage/src/view/example/excel/excel.vue b/QMPlusVuePage/src/view/example/excel/excel.vue
index 4e165e75..a28da79a 100644
--- a/QMPlusVuePage/src/view/example/excel/excel.vue
+++ b/QMPlusVuePage/src/view/example/excel/excel.vue
@@ -1,10 +1,48 @@
 <template>
     <div>
-        excel导入导出
+        <el-upload
+                class="upload-demo"
+                :headers="{'x-token':token}"
+                action="/api/fileUploadAndDownload/upload"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                multiple
+                :limit="10"
+                :on-exceed="handleExceed"
+                :file-list="fileList">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">未对文件格式及大小做校验</div>
+        </el-upload>
+        </el-upload>
     </div>
 </template>
 <script>
+    import { mapGetters } from 'vuex'
 export default {
-    name:'Excel'
+    name:'Excel',
+    data() {
+        return {
+            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+        };
+
+    },
+    computed: {
+       ...mapGetters('user', ['userInfo', 'token'])
+    },
+    methods: {
+        handleRemove(file, fileList) {
+            console.log(file, fileList);
+        },
+        handlePreview(file) {
+            console.log(file);
+        },
+        handleExceed(files, fileList) {
+            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+        },
+        beforeRemove(file, fileList) {
+            return this.$confirm(`确定移除 ${ file.name }？`);
+        }
+    }
 }
 </script>
\ No newline at end of file