使用axios将前端fom-data数据发送到后端

最新推荐文章于 2024-08-21 04:35:59 发布

w星曦y殒陌x

最新推荐文章于 2024-08-21 04:35:59 发布

阅读量892

点赞数 12

文章标签： java tomcat maven spring intellij-idea vue

本文链接：https://blog.csdn.net/qq_28623001/article/details/136424743

版权

前言

本方法基于前后端分离开发
前端使用vue2.0，CLI脚手架搭建
后端使用Java语言，Maven项目，sping SSM框架。

一、基本配置

（一）后端服务器

（1）引入依赖：

file-upload 1.3.1
commons-io 2.5

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.26}</version>
</dependency>

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>

（2）spirngMVC 配置文件

配置文件传输解析器

<!-- 配置文件传输解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="104857600"/>
    <property name="maxInMemorySize" value="4096"/>
    <property name="defaultEncoding" value="UTF-8"/>
</bean>

配置跨域访问cors

<!-- 全局配置cors -->
<!-- 其中：
  allowed-origins 为允许的访问源地址（*为所有请求）
  allowed-methods 为允许访问方式
  allow-credentials 为允许携带cookies（允许时origins不能为*）
  exposed-headers 为响应携带的头部
  allowed-origin-patterns 可以使访问源自动添加至允许的地址中
 -->
<mvc:cors>
    <mvc:mapping path="/**"
                 allowed-origin-patterns="*"
                 allow-credentials="true"
                 allowed-origins=""
                 allowed-headers="*"
                 />
</mvc:cors>

（二）前端vue脚手架

（1）安装axios

npm install axios

（2）安装element-ui

npm i element-ui -S

二、代码实现上传单个文件实体

（一）后端服务器控制层

@Controller
public class TestController {
    @RequestMapping("/upload/test1")
    @ResponseBody
    public void uploadTest(@RequestParam("file") MultipartFile multipartFile){
        System.out.println("uploadTest");
        System.out.println("file="+multipartFile);
    }
}

（二）前端vue页面

postForm方法只是对应的 post方法，其 content-type 头部默认设为multipart/form-data

<template>
    <el-container>
        <el-header>
            <h1>测试</h1>
        </el-header>
        <el-main>
            <el-row type="flex" justify="center">
                <el-col :span="12">
                    <el-upload class="avatar-uploader" :auto-upload="false" :multiple="false" :show-file-list="false" :on-change="getImg">
                        <el-image class="avatar" v-if="imageUrl" :src="imageUrl" fit="fill"/>
                        <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon"/>
                    </el-upload>
                    <el-button @click="imageUrl = '';file = ''">重新上传</el-button>
                    <el-button @click="uploadImg">上传至服务器</el-button>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl: '',
                file:'',
            }
        },
        methods: {
            getImg(file,fileList){
                this.file = file.raw;
                this.imageUrl = URL.createObjectURL(this.file);
            },
            uploadImg(){
                console.log(this.file);
                this.$axios.postForm('/upload/test1',{
                    file:this.file
                });
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader i{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        border-color: #409EFF;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 1px;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px; 
        text-align: center;
    }
    .avatar {
        width: 150px;
        height: 150px;
        display: block;
    }
</style>

（三）测试结果

uploadTest file=MultipartFile[field="file", filename=你上传的图片名字.图片格式, contentType=image/jpeg, size=58751]

三、包含文件实体和其他数据的混合表单上传

（一）前端Vue页面方法

将文件和数据直接放到一起，使用axios的postForm上传即可（axios内置方法直接将数据序列化）

uploadImg(){
    this.$axios.postForm('/upload/test3',{
        file1:this.file1，
        file2:this.file2,
        userId:1
    });
}

（二）后端服务器控制层

注意此时要使用MultipartHttpServletRequest接口
获取其中的文件map使用上述接口的getMultiFileMap()方法
获取其中的参数使用上述接口的getParameter(参数名)方法，注意此处不能使用getParameterMap()方法，因返回的Map对象是<String,String[]>格式。不方便取其中值

@Controller
public class TestController {
    @RequestMapping("/upload/test3")
    public void uploadTest3(MultipartHttpServletRequest req){
        System.out.println("upload test 3");
        MultiValueMap<String, MultipartFile> multiFileMap = req.getMultiFileMap();
        System.out.println(multiFileMap);
        System.out.println("");
        String userId = req.getParameter("userId");
        System.out.println(userId);
    }
}

（三）测试结果

upload test 3 {file1=[MultipartFile[field="file1", filename=0f4bd884-dc9c-4cf9-b59e-7d5958fec3dd.jpg, contentType=image/jpeg, size=117856]], file2=[MultipartFile[field="file2", filename=2a50628e-7758-4c51-9fbb-d37c61cdacad.jpg, contentType=image/jpeg, size=84907]]}

1