案例-14.文件上传-简介

news/2025/2/24 5:05:38

一.简介

文件上传涉及到两个部分,一个是前端程序,另一个是服务端程序。

二.前端程序

1.前端上传文件必须有三要素:

1.form表单,并且在form表单中要定义一个表单项,类型为file。其效果是会弹出一个“选择文件”的按钮,点击按钮就会弹出窗口用来上传文件。效果如下:

2.表单的提交方式必须是post方式,因为我们要上传的文件可能比较大,因此要使用post提交方式。

3.在form表单中指定文件的编码格式为“multipart/form-data”,即enctype="multipart/form-data"。 因为普通默认的编码格式是不适合传输大型的二进制数据的。

2.我们需要将前端文件放在resources目录下的static文件夹中:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>

    <form action="/upload" method="post" enctype="multipart/form-data">
        姓名: <input type="text" name="username"><br>
        年龄: <input type="text" name="age"><br>
        头像: <input type="file" name="image"><br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

 action指定表单往哪里提交,method指定表单的提交方式为post,enctype指定表单的编码格式为"multipart/form-data"

如果要进行文件上传,不仅要设置enctype为multipart/form-data,而且必须在form表单项中设置type="file"。

运行该前端文件,在浏览器中打开,点击提交,选择中国梦.txt文件

在提交之前先通过F12打开开发者工具来抓取网络请求。 

点击提交,在提交页面中显示404,这是正常的,因为服务端程序还没开发。

我们找到POST请求,打开原始并找到请求头,其中有一个Content-Type:即是文件的编码格式,我们这里先暂时没有设置,因此是默认的application/x-www-form-urlencoded格式。

我们来具体看使用默认的表单编码格式数据是以什么样的格式提交的。 

点击请求,并打开原始开关,就显示出来以默认方式提交表单后数据的编码格式。我们看到的被标记的部分是“中国梦”这三个字的url编码。因此我们可以得出结论:

如果以默认方式进行提交,那么提交的就是该文件的文件名! 

3.如果设置enctype为multipart/form-data,再次提交:

我们会发现Content-Type属性为multipart/form-data,boundary为不同表单项之间的分隔符

 展示的内容被分为了三个部分,由boundary进行分隔

注意:然后上传的是图片或者音视频,是看不到的会是乱码,因为是2进制文件。

三.后端(服务端)程序

我们设置Controller层来对前端传输过来的数据进行接收,对于普通的表单项,使用正常的参数变量进行接收即可,对于图片、文本、音视频等二进制类型的文件来说,使用一个特定的变量类型MultipartFile进行文件接收即可。要想成功接收到传输过来表单项,必须要保证表单项的名称和方法形参的名称要保持一致。如果不一致,要使用注解@RequestParam,@RequestParam当中指定的value属性就是前端所传递的参数名。

1.controller层

package com.gjw.controller;

import com.gjw.pojo.Result;
import com.gjw.util.AliOSSUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;


@RestController
@Slf4j
public class UploadController {
    @PostMapping("/upload")
    public Result upload(String username, Integer age, MultipartFile file) {
        log.info("文件上传:{},{},{},{}", username, age, file);
        return Rusult.success();
    }
}

直接使用浏览器访问localhost:8080/upload.html访问该表单。 输入姓名为Tom,年龄为18,头像选择"中国梦.txt"文件

点击提交后,程序运行到断点,文件已经提交上去了,但是提交到哪里了呢?找到location,里面的路径就是文件的所在目录。

根据目录找到所在文件 将其改为.txt结尾的文本类型文件,就可以看到我们提交的表单项的内容了,其中一个文件是Tom,另一个是18,最后一个是“中国梦.txt”文件中的内容。然后我们点击放行。放行之后,会发现所提交的文档已经没有了,这是因为程序结束后会自动清理临时文件。

因此除了上传文件,我们还要将文件保存下来。


http://www.niftyadmin.cn/n/5863972.html

相关文章

深度学习pytorch之19种优化算法(optimizer)解析

提示&#xff1a;有谬误请指正 摘要 本博客详细介绍了多种常见的深度学习优化算法&#xff0c;包括经典的LBFGS 、Rprop 、Adagrad、RMSprop 、Adadelta 、ASGD 、Adamax、Adam、AdamW、NAdam、RAdam以及SparseAdam等&#xff0c;通过对这些算法的公式和参数说明进行详细解析…

解决Excel文件格式损坏问题:如何通过程序读取并复制内容

在日常工作中&#xff0c;我们经常会遇到因文件损坏或格式问题无法打开的 Excel 文件。尤其是 .xls 格式的旧版 Excel 文件&#xff0c;在某些情况下可能由于损坏、格式不兼容或其他原因&#xff0c;导致无法通过常规方式读取和处理。本文将分享一种通过 Python 程序解决损坏的…

C#上位机--进程和线程的区别

引言 在 C# 上位机开发中&#xff0c;进程和线程是两个非常重要的概念&#xff0c;它们在程序的运行和性能优化方面起着关键作用。理解进程和线程的区别&#xff0c;能够帮助开发者更好地设计和实现高效、稳定的上位机程序。本文将深入探讨 C# 上位机中进程和线程的区别&#…

结构型模式-Bridge模式(桥接模式)

解释 桥接模式是将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。它是一种对象结构型模式。 Bridge模式核心思想将抽象与实现解耦&#xff0c;使二者可以独立变化。适用于一个类存在多个变化维度且需要灵活扩展的场景。 场景假设&#xff1a;图形渲染系统 …

体育电竞比分网开发流程

开发一个体育电竞比分网的流程可以分为以下几个主要步骤&#xff1a; 1. 需求分析 目标用户&#xff1a;确定网站的主要用户群体&#xff0c;如体育迷、电竞爱好者等。 功能需求&#xff1a;列出网站需要实现的功能&#xff0c;如实时比分更新、赛事日程、新闻资讯、用户评论…

c++ std::vector使用笔记

std::vector 是 C 标准库中的一个动态数组容器&#xff0c;提供了丰富的接口来管理容量、插入、删除和访问元素。以下是对你提到的接口的详细说明和使用示例&#xff1a; 1. 容量相关接口 capacity(): 返回当前 vector 分配的存储空间大小&#xff08;以元素数量计&#xff09…

用Python实现Excel数据同步到飞书文档

目录 一、整体目标 二、代码结构拆解 三、核心逻辑讲解&#xff08;重点&#xff09; 1. 建立安全连接&#xff08;获取access_token&#xff09; 2. 定位文档位置 3. 数据包装与投递 四、异常处理机制 五、函数讲解 get_access_token() 关键概念解释 1. 飞书API访问…

在虚拟机中搭建Spark学习环境的完整指南

在大数据处理领域&#xff0c;Apache Spark作为一种强大的开源数据处理框架&#xff0c;因其高效性和灵活性而备受开发者青睐。为了更好地学习和实践Spark&#xff0c;许多初学者会选择在虚拟机中搭建Spark环境。本文将详细介绍如何在虚拟机中创建并配置Spark环境&#xff0c;从…