唠嗑部分
上篇文章我们说了使用form表单的input文件域上传文件，上篇文章：
但是现在随着前后端分离的开发方式，这种方式越来越少见了，对于后端工程师来说，接口层并没有多大变化，对于前端工程师、亦或者是干全栈的同学们来说，ajax已经不再陌生，那我们本节就来说说，ajax实现文件上传及文件预览
首先来说FormData与FileReader的使用，都是HTML5新增的API
FormData
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send()方法发送出去，如果发送请求时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
构造函数
// 参数传form表单对象，要求表单中的每一项均有name字段，否则无法帮你做收集 var fd = new FormData(form)
常用api
fd.append(key,value); // 如果指定的key不存在则会新增一条数据，如果key存在，则追加到数据末尾 fd.set(key,value); // 如果指定的key存在则会覆盖 fd.get(key); // 返回该key的第一个值 fd.getAll(key); // 返回该key的所有值，数组格式 fd.delete(key); // 删除一项 fd.has(key); // 判断key是否存在，返回布尔值
FileReader
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件内容，使用 File 或 Blob 对象指定要读取的文件或数据。
构造函数
const fr = new FileReader();
常用api
fr.readAsDataURL(file); // 参数是一个文件，将文件读取为一个Base64编码的字符串，通过fr.result获取 fr.onload = () => {}; // 事件，读取过程是异步的，读取完会执行
言归正传
1、创建项目&导入依赖
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>spring-boot-starter-parent</artifactId> <groupId>org.springframework.boot</groupId> <version>2.4.2</version> <relativePath/> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.cxs</groupId> <artifactId>ajax-file-upload</artifactId> <version>1.0-SNAPSHOT</version> <properties> <maven.compiler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> </dependencies> </project>
2、编写前端页面结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax-文件上传</title> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script> </head> <body> <div> <form id="form"> 用户名：<input type="text" name="username"/><br/> 密码: <input name="password" type="password"/><br/> <input id="file" type="file" name="file" style="display: none;"/> <label for="file"> <img id="img" src="" title="+" width="300" height="150" style="cursor: pointer;"/> </label> <button>上传</button> </form> </div> </body> </html>
3、后端接口部分
@PostMapping("/upload") public Map<String, Object> upload(User user, @RequestParam("file") MultipartFile file){ Map<String, Object> result = new HashMap<>(); result.put("code", 200); try { if (!ObjectUtils.isEmpty(file)) { // 获取源文件的名字 String originalFilename = file.getOriginalFilename(); if (StringUtils.hasLength(originalFilename)) { // 进行文件上传 String fullPath = PATH + File.separator + originalFilename; File f = new File(fullPath); if (!f.exists()) { f.createNewFile(); } file.transferTo(f); user.setAvatar(fullPath); result.put("data", fullPath); result.put("user", user.toString()); } } else { result.put("code", 400); result.put("msg", "文件不能为空!"); } } catch (IOException e) { e.printStackTrace(); result.put("code", 500); result.put("msg", "文件上传失败!"); } return result; }
4、文件预览-FileReader的使用
详解请看注释
// 给input框添加change事件，监听文件的改变 inp.addEventListener("change",function(){ // 获取到文件，inp.files是一个集合 const file = inp.files[0]; // 基础校验 if(!file) { // 点击了取消，将预览置空 img.src = currentPath; // 清空currentFile currentFile = undefined; return; } // 文件格式判断，这里只能传图片 if(!file.type.startsWith("image")) return window.alert('请选择图片'); // 给currentFile赋值 currentFile = file; // 读取文件，进行预览 const fr = new FileReader(); // 将文件读取为一个base64编码 fr.readAsDataURL(file); // fr读取是一个异步操作，读取完会执行下面函数 fr.onload = () => { console.log(fr.result) img.src = fr.result; } })
5、文件上传-FormData的使用
Jquery对于ajax的处理说明：
jQuery帮我们做了封装，会将所有请求的请求头设置为application/x-www-form-urlencoded,而文件上传要求是multipart/form-data
此时如果按照jQuery默认的就会出现问题
解决：不让jQuery帮我们设置就可以：contentType:false,告诉jQuery不要设置我请求头里的content-type
jQuery还会帮我们把数据格式转化为key=value的形式
解决：不让jQuery自动格式化数据:processData:false,告诉jQuery别帮我格式化数据
// 表单的提交事件 $("#form").submit(function (e){ // 阻止表单submit事件的默认行为，否则会有个刷新的现象 e.preventDefault() // 创建formdata，FormData会将form表单中带有name的字段自动处理成每一项 var formData = new FormData(this); if(!currentFile) return window.alert("请选择文件再上传"); // 发送ajav请求上传 $.ajax({ // 服务器接口地址 url: '/upload', // 请求方式 type: 'post', // 参数 data: formData, // 这两个参数在文件上传时较特殊，详细请看文章描述 contentType : false, processData : false, // 成功的回调函数 success : (resp) => { console.log(resp) } }) })
测试&结语
测试如下图
结语
1、本文采用jQuery作为ajax库，axios大家可自行研究（类似）
2、源码获取方式,全栈小白公众号后台回复：文件上传
