使用Element-UI中的el-upload实现文件的上传demo(亲测有用)

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站 点击跳转浏览。

先介绍一个demo ，前端框架使用的是VUE，组价用的是el-upload组件，它的相关介绍在官方文档中有介绍，点击即可跳转Upload 上传 ，那么话不多少，上代码。

前端代码如下

<template>
  <el-dialog  class="dialog" v-model="dialogFormVisible" title="导入文件" width="30%" align-center>
   <el-form :model="form" >
     <el-form-item label="导入数据文件" :label-width="formLabelWidth">
       <el-upload
         v-model:file-list="fileList"
         class="upload-demo"
         action="#"
         multiple
         :auto-upload="false"
         :on-change="handleChange"
         :on-remove="handleRemove"
         :limit="2"
     >
     <el-button type="primary">Click to upload</el-button>
     </el-upload>
     </el-form-item>
   </el-form>

   <template #footer>
     <span class="dialog-footer">
       <el-button @click="dialogFormVisible = false">Cancel</el-button>
       <el-button type="primary" @click="confirm">
         Confirm
       </el-button>
     </span>
   </template>

 </el-dialog>
</template>

<script>
import {excelToolImport} from "@/utils/post";
export default {
 data () {
   return {
     dialogFormVisible:false,
     fileMap:{},
     form:{
       name: '',
       region: '',
       date1: '',
       date2: '',
       delivery: false,
       type: [],
       resource: '',
       desc: '',
     },
     fileList:[]
   }
 },
 components: {},
 methods: {
   changeVisible(){
     this.dialogFormVisible = !this.dialogFormVisible
   },
   handleChange(file, fileList) {
     this.fileList = fileList
   },
   handleRemove(file, fileList) { 
     this.fileList = fileList
   },
   async confirm(){
     let self =this
     debugger
     let formData = new window.FormData();
     for(let i=0;i<this.fileList.length;i++){
       formData.append('file', this.fileList[i].raw);
     }
     console.log(formData.get('file'))
     excelToolImport(formData)
     self.dialogFormVisible = false
   },
 },
 watch: {},
 created () {},
 mounted () {}
}
</script>
<style scoped>
.dialog{
 color: #124373;
 background: linear-gradient(0deg, rgba(101,186,246,0.2), rgba(0,0,0,0));
}
.comAddBatch-row-file {
   font-size: 0.9vw;
   width: 325px;
   color: #fff;
   flex: 1;
   max-width: calc(100% - 80px);
   height: 22px;
   display: flex;
   align-items: center;
   border: 1px solid #1197f3;
   box-shadow: 0 0 7px 1px rgba(33, 152, 235, 0.3) inset;
   border-radius: 5px;
 }
 .file-name {
   flex: 1;
   padding-left: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .second-row{
   display: flex;
   height: 22px;
 }
 .font{
   height: 19px;
   font-size: 14px;
   font-family: Microsoft YaHei;
   font-weight: 400;
   color: #1b9cba;
   line-height: 16px;
 }
 .comAddBatch-line {
 width: 100%;
 height: 1px;
 opacity: 0.1;
 border-bottom: 1px solid #57b6fa;
 margin: vw(10) auto;
}
.comAddBatch-row {
 width: 100%;
 height: 52px;
 display: flex;
 align-items: center;
 padding: 0 1vw;
 font-size: 0.9vw;
 color: #1883d0;
 font-family: "Microsoft YaHei";
 }
.comAddBatch-row-title {
   margin-top: 10px;
 }
.comAddBatch-file-blue {
color: #1e71eb;
}

.comAddBatch-file-green {
 color: #00b163;
}

.comAddBatch-file-red {
 color: #f74f66;
}
.comAddBatch-file-num {
 margin: 0 0.5vw;
 font-family: Impact;
 font-size: 26px;
}


</style>

对应的js文件如下

import axios from 'axios'
// 测试 EXCEL数据导入ES
export function excelToolImport (obj) {
  return axios.post( '/tool-station/testExcelTool',obj
)

}

对应的后端接口

 @RequestMapping(value = "/testExcelTool", method=RequestMethod.POST)
    public String excelImport(@RequestParam(value = "file") MultipartFile[] files) throws IOException {
        for (MultipartFile file : files) {
            InputStream in = file.getInputStream();
            String originalFilename = file.getOriginalFilename();
            Path path1 = Files.createFile(Paths.get("data/" + originalFilename));
            File file1 = new File(String.valueOf(path1));
            FileOutputStream os = new FileOutputStream(file1);
            byte[] buffer = new byte[1024];
            int length;
            while ((length = in.read(buffer)) != -1) {
                os.write(buffer, 0, length);
            }
            os.flush();
            in.close();
            os.close();
        }