Element+Axios+SpringBoot上传文件

r囧r小猫 2022-10-17 13:44 164阅读 0赞

# 一、Element 组件 #

### 1、Element官网API ###

https://element.eleme.cn/#/zh-CN/component/upload

### 2、组件代码 ###

<el-upload style="height: 32px;margin-left: 10px;float: left"
                                                action=""
                                                class="upload-demo"
                                                ref="uploadRef"
                                                :on-preview="handlePreview"
                                                :http-request="uploadData">
        <el-button type="primary" size="small" icon="el-icon-upload">上传</el-button>
    </el-upload>

### 3、组件显示 ###

![20210603141623854.png][]

# 二、Axios请求 #

handlePreview: function (file) {
        console.log("handlePreview");
    },
    //上传数据
    uploadData: function (file) {
        console.log("上传开始");
        let formData = new FormData();
        formData.append('file', file.file); //文件对象
        formData.append('param', "其它参数、对象");
        let config = {
    		headers: {"Content-Type": "multipart/form-data"}
        };//请求头配置
        axios.post('/uploadFile', formData, config)
    	.then(function (response) {
    		let data = response.data;
    		console.log("上传");
    		app.$message.success(data.result);
    	}).catch(function (error) { // 请求失败处理
    		console.log(error);
        });
    }

# 三、SpringBoot 接收 #

@PostMapping(value = "/uploadExcel")
    public ResponseEntity uploadCopyWritingExcel(
    	HttpServletRequest request, 
    	@RequestParam("file") MultipartFile file, 
    	@RequestParam("param") String param) {
    	
    }

[20210603141623854.png]: /images/20221014/8d2c793ef8bd4ff8a5ca99ae49af8e5d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 java文件上传Minio——文件、文件分片上传

本文主要介绍了文件上传——单\\多文件分片上传；当然还有文件的md5值秒传、文件断点续传等内容，本文结合minio文件服务和redis做计数来实现的场景（下方地址是单机情况，即

短命女/ 2023年10月13日 17:48/ 0 赞/ 74 阅读

相关 php 上传文件,PHP 文件上传

文件上传概述文件上传功能是网络生活中经常使用的一个功能。使用 PHP 可以很方便的实现文件上传，其具体流程如下：表单选择文件 -> 检查文件大小及类型 -> 生成临时文

以你之姓@/ 2022年11月12日 10:52/ 0 赞/ 328 阅读

相关【上传】Nginx 上传文件

本文包含知识点： > 1、nginx服务搭建 > > 2、nginx文件上传模块搭建 > > 3、文件重命名服务搭建 > > 3、nginx整体配置 > > 4、

浅浅的花香味﹌/ 2022年10月11日 12:14/ 0 赞/ 469 阅读

相关文件上传

文件上传说明：文件上传流程 :把request对象封装成fileitem对象存于磁盘或内存，获取ftp服务器地址和端口号，用storeFile方法将字节流写到

浅浅的花香味﹌/ 2022年07月14日 09:50/ 0 赞/ 404 阅读

相关文件上传

struts的文件上传方法实现： 1、实体类对应属性 ![Center][] 2、上传的实现方法： / 保存用户的信息 /

深藏阁楼爱情的钟/ 2022年07月13日 13:43/ 0 赞/ 206 阅读

相关文件上传设置上传文件大小

控制台报错 org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededExcept

男娘i/ 2022年04月17日 05:08/ 0 赞/ 364 阅读

相关文件上传

在实际的开发中，我们可能需要将图片、影音等文件直接保存到数据库中，然后通过编程方式将数据读出进行使用。例如将读出的图片数据显示出来，将读出的电影文件播放出来。二进制数据直

深碍√TFBOYSˉ_/ 2022年03月11日 04:36/ 0 赞/ 305 阅读

相关文件上传

import org.apache.commons.io.FileUtils; import org.springframework.web.multipart

迷南。/ 2022年01月11日 02:57/ 0 赞/ 321 阅读

相关文件上传

一、建立 index.html 文件，内容如下： <!DOCTYPE html> <html lang="en"> <head> <m

客官°小女子只卖身不卖艺/ 2021年09月16日 16:24/ 0 赞/ 466 阅读

相关 js上传文件；input上传文件；

html原生上传文件方式1： ![在这里插入图片描述][20210324233047985.gif] <!DOCTYPE html> <html>

小灰灰/ 2021年09月07日 06:20/ 0 赞/ 632 阅读