Spring Boot - XMLHttpRequest Upload(上传文件,非前后端分离)_好惨的光头强的博客-程序员宅基地

技术标签: spring  java  maven  web.xml  log4j2  

目录

项目

新建 Spring Starter Project,编辑 pom.xml 文件,引入依赖:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.3.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <groupId>com.mk</groupId>
    <artifactId>spring-boot-XMLHttpRequest-upload</artifactId>
    <version>1.0.0</version>

    <name>spring-boot-XMLHttpRequest-upload</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- Commons IO -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.springframework.boot</groupId>
                            <artifactId>spring-boot-configuration-processor</artifactId>
                        </exclude>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

编辑 application.yml 文件,设置上传文件的大小限制:

spring:
  servlet:
    multipart:
      max-file-size: 200MB
      max-request-size: 1000MB

IndexController 控制器:

package com.mk.controller;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class IndexController {

    @GetMapping({"", "/index"})
    public String index() {
        return "index";
    }
    
    @PostMapping("/upload")
    @ResponseBody
    public String upload(HttpServletRequest request,
            @RequestParam(value = "file", required = false) MultipartFile file,
            String filename) throws IllegalStateException, IOException {
        
        String authorization = request.getHeader("Authorization");
        System.out.println(authorization);
        
        String originalFilename = file.getOriginalFilename();
        file.transferTo(new File("G:/20191212", originalFilename));
        
        return filename;
    }
}

src/main/resources/templates/index.html 文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Using XMLHttpRequest</title>
    </head>
    <body>
        <input type="file" accept="*.*" />

        <script type="text/javascript">
            window.onload = (event) => {
                const DONE = 4
                
                const input = document.querySelector('input[type=file]')
                
                input.onchange = (event) => {
                    const files = event.target.files
                    
                    if (files.length > 0) {
                        const file = files[0]
                        console.log(file)
                        
                        const formData = new FormData()
                        formData.append('filename', file.name)
                        formData.append('file', files[0])
                        
                        const xhr = new XMLHttpRequest()
                        xhr.addEventListener("load", function(event) {
//                             console.log(event)
                            if (xhr.readyState == DONE && xhr.status == 200) {
                                console.log(xhr)
                                console.log(xhr.response)
                            }
                        })
                        xhr.open("POST", "/upload", true)
                        xhr.responseType = 'text'
                        xhr.setRequestHeader('Authorization', '1234567890')
                
                        xhr.send(formData)
                    }
                }
            }
        </script>
    </body>
</html>

参考

XMLHttpRequest

4.5. Handling Multipart File Uploads

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29761395/article/details/120148424

智能推荐

使用Context Hook_qq_21696621的博客-程序员宅基地_hook 使用context

基础context写法import React,{createContext, useState} from 'react';const CountContext = createContext();class Foo extends React.Component{ render(){ return ( &lt;CountContext.Consumer&gt; { count =&gt; &lt;h1&gt;{count}&lt

并发之信号_冷眼观world的博客-程序员宅基地

大纲信号的概念signal信号的不可靠可重入函数信号的响应过程没收到信号收到信号SIG_IGN原理标准信号为什么会丢失信号常用函数killraisealarmpause结合alarm和pause实现类似漏桶的程序abortsystemsleep信号集信号屏蔽字和pending集处理扩展sigsuspendsigactionsetitimer实时信号同步,就是调用某个东西是,调用方得等待这个调用返回结果才能继续往后执行。异步,和同步相反 调用方不会理解得到结果,而是在调用发出后调用者可用继续执行后续操作

单节点安装OpenStack 之 keystone 安装和glance 安装_默默的菜鸟--的博客-程序员宅基地

接着上面的开始( 单节点安装OpenStack 之环境的准备http://blog.csdn.net/qq_34160679/article/details/78008659) 下面我们开始安装keystone 认证服务和glance 镜像。认证服务  在 控制节点上配置。 1、前提条件创建数据库 以root 身份登录到数据库(1) 以root 身份登录到数据库

学习DDR2时值得一看的资料_panfengsoftware的博客-程序员宅基地

转载:http://blog.chinaunix.net/uid-20543672-id-3030997.html最近在认真研究DDR2芯片的时序和配置过程,这里总结一些关于学习DDR2时值得一看的资料:1、《内存的原理和时序(SDRAM、DDR、DDR-Ⅱ、Rambus_DRAM)》PDF文档,简直是学习DDRx技术的经典教程。刚开始做嵌入式的时候就看了这个文档来学习

如何用迅雷下载python_python解决迅雷下载限制的方法_weixin_39526564的博客-程序员宅基地

原博文2019-10-26 21:23 −一、转换迅雷下载链接 import base64 url='thunder://QUFodHRwOi8veHVubGVpLnhpYXphaS16dWlkYS5jb20vMTkwOC/JqLa+Mi5IRDEyODC438flufrT79bQ19aw5i5tcDRaWg==' # 看见thunder:...相关推荐2019-12-06 14:02 −学习提...

ORB_SLAM2代码阅读及总结使用_kakelu的博客-程序员宅基地_orbslam2代码

在学习ORB_SLAM2之前先从OPENCV入手OpenCV3】cv::Mat类成员函数详解我们有多种方法可以获得从现实世界的数字图像:数码相机、扫描仪、计算机体层摄影或磁共振成像就是其中的几种。在每种情况下我们(人类)看到了什么是图像。但是,转换图像到我们的数字设备时我们的记录是图像的每个点的数值。Q:如何获取和存储像素值Mat本质上是由两个数据部分组成的类: (包含信息有矩阵的大小,用于存储的方法,矩阵存储的地址等) 的矩阵头和一个指针。cv::Mat A,C;//仅创建头部A = imre

随便推点

计算机处理器几位从那里看,[电脑怎么看几位]要怎么看电脑是几位的系统_烨轩的博客-程序员宅基地

[电脑怎么看几位]怎么看电脑系统是几位的在CMD里面打SYSTEMINFO,里面有一行SYSTEMTYPE如果是X86就是32位的,X64就是64位的系统[电脑怎么看几位]怎么查看电脑是多少位的系统点击开始--运行输入cmd回车,在cmd窗口中输入systeminfo回车,显示出系统详细信息,其中观察系统类型一项,标明是X86BasedPC,说明是32位,否则是64位。xp系统的一般都是32位,w...

mysql游标的使用_mysql cursor游标的使用,实例_獭者的博客-程序员宅基地

mysql被oracle收购后,从mysql-5.5开始,将InnoDB作为默认存储引擎,是一次比较重大的突破。InnoDB作为支持事务的存储引擎,拥有相关的RDBMS特性:包括ACID事务支持,数据完整性(外健),灾难恢复能力等特性。使用mysql做为数据库的话,将来程序员肯定要写很多,存储过程,function等。在写些东东的时候,游标肯定是少不了的。下面简单简介一下。一,什么是游标(curs...

BusyBox - The Swiss Army Knife of Embedded Linux_zoudy6688的博客-程序员宅基地

AM转自 https://busybox.net/downloads/BusyBox.htmlBusyBox - The Swiss Army Knife of Embedded LinuxSYNTAX busybox [arguments...] # or [arguments...] # if symlinkedDESCR

机器学习中有监督学习——回归_小妖精Fsky的博客-程序员宅基地_回归是有监督还是无监督

一、引言  本材料参考Andrew Ng大神的机器学习课程 http://cs229.stanford.edu,以及斯坦福无监督学习UFLDL tutorial http://ufldl.stanford.edu/wiki/index.php/UFLDL_Tutorial  机器学习中的回归问题属于有监督学习的范畴。回归问题的目标是给定D维输入变量x,并且每一个输入矢量x都有对应的

JavaScript 全局变量与局部变量的关系及声明方式_King_960725的博客-程序员宅基地

对于 JavaScript 中的全局变量和局部变量,分为隐式声明和显示声明。全局变量1.使用 var 关键字在函数外部声明的变量,为全局变量(显示声明)2.在函数内部,没有使用 var 声明的变量,也为全局变量(隐式声明)3.使用 window 全局对象来声明的变量,也为全局变量 `window.a = 1;`(显示声明)局部变量1.在函数内部使用 var 关键字声明的变量,为局部变...

详解 | UML类图符号、各种关系说明以及举例_ITMuch.com的博客-程序员宅基地

点击上方IT牧场,选择置顶或者星标技术干货每日送达!作者 |duanxz来源 |https://www.cnblogs.com/duanxz/archive/2012/06/1...

推荐文章

热门文章

相关标签