作者 小范

新增上传文件界面

@@ -157,6 +157,8 @@ import transfer from './views/airtransport/transfer.vue' @@ -157,6 +157,8 @@ import transfer from './views/airtransport/transfer.vue'
157 // import transpour from './views/airtransport/transpour.vue' 157 // import transpour from './views/airtransport/transpour.vue'
158 //对话框 158 //对话框
159 import dialogs from './views/dialogBox/dialogs.vue' 159 import dialogs from './views/dialogBox/dialogs.vue'
  160 +import upload from './views/dialogBox/upload.vue'
  161 +
160 162
161 // 场站管理 163 // 场站管理
162 import Yard from './views/station_manage/Yard.vue' 164 import Yard from './views/station_manage/Yard.vue'
@@ -263,10 +265,11 @@ let routes = [ @@ -263,10 +265,11 @@ let routes = [
263 { 265 {
264 path: '/dialogName', 266 path: '/dialogName',
265 component: HomeNew, 267 component: HomeNew,
266 - name: '对话框', 268 + name: '物流GPT',
267 iconCls: 'el-icon-delete-location', 269 iconCls: 'el-icon-delete-location',
268 children: [ 270 children: [
269 { path: '/dialogs', component: dialogs, name: '对话框' }, 271 { path: '/dialogs', component: dialogs, name: '对话框' },
  272 + { path: '/upload', component: upload, name: '上传文件' },
270 ] 273 ]
271 }, 274 },
272 275
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <div>
  6 + <el-upload
  7 + class="upload-demo"
  8 + action="https://jsonplaceholder.typicode.com/posts/"
  9 + :on-preview="handlePreview"
  10 + :on-remove="handleRemove"
  11 + :before-remove="beforeRemove"
  12 + multiple
  13 + :limit="3"
  14 + :on-exceed="handleExceed"
  15 + :file-list="fileList">
  16 + <el-button size="small" type="primary">点击上传</el-button>
  17 + <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  18 + </el-upload>
  19 + </div>
  20 + </el-card>
  21 + </el-main>
  22 + </el-container>
  23 +</template>
  24 +
  25 +<script>
  26 + export default {
  27 + data() {
  28 + return {
  29 + 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'}]
  30 + };
  31 + },
  32 + methods: {
  33 + handleRemove(file, fileList) {
  34 + console.log(file, fileList);
  35 + },
  36 + handlePreview(file) {
  37 + console.log(file);
  38 + },
  39 + handleExceed(files, fileList) {
  40 + this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
  41 + },
  42 + beforeRemove(file, fileList) {
  43 + return this.$confirm(`确定移除 ${ file.name }?`);
  44 + }
  45 + }
  46 + }
  47 +</script>
  48 +
  49 +<style scoped>
  50 +
  51 +</style>