form表单示例

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>