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

简介: 使用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();
        }
相关文章
|
5月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
|
Web App开发 资源调度 JavaScript
SAP Fiori Elements 应用里的 ui5.yaml 文件详解试读版
SAP Fiori Elements 应用里的 ui5.yaml 文件详解试读版
|
14天前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
3月前
|
前端开发 JavaScript
vue + element-UI 图片压缩canvas【详解】(含完整demo)
vue + element-UI 图片压缩canvas【详解】(含完整demo)
302 1
|
3月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
788 0
|
5月前
|
人工智能 数据库
无法将文件“obj\Debug\UI.exe“复制到“bin\Debug\UI.exe“。文件“bin\Debug\UI.exe“正由另一个进程使用,因此该进程无法访问此文件。
无法将文件“obj\Debug\UI.exe“复制到“bin\Debug\UI.exe“。文件“bin\Debug\UI.exe“正由另一个进程使用,因此该进程无法访问此文件。
133 0
|
5月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
108 1
|
5月前
|
移动开发 开发框架 JavaScript
什么是 SAP UI5 项目 ui5.yaml 文件中的 specVersion 字段
什么是 SAP UI5 项目 ui5.yaml 文件中的 specVersion 字段
|
5月前
|
UED
SAP UI5 开发项目 package.json 文件里的 @sap/ux-specification 依赖
SAP UI5 开发项目 package.json 文件里的 @sap/ux-specification 依赖
|
JSON 数据格式 开发者
SAP UI5 manifest.json 文件里 extends 区域的内容是如何被解析的
SAP UI5 manifest.json 文件里 extends 区域的内容是如何被解析的