最近为了响应系统对安全方面的要求，我们做的整改之一是对文件上传部分，除了在前端页面上限制用户可以选择的文件类型，还在后端接口中新增了对文件后缀名（这里主要是图片）的限制，核心代码如下。

    // 支持常用文件类型
    private List<String> supportedFileTypes = Arrays.asList("bmp", "gif", "jpg", "jpeg", "png");
    if(!supportedFileTypes.contains(extension)){
        throw new ServiceException("无效的文件格式");
可是通过前端上传文件后，后端持续报错：无效的文件格式，见鬼。。
 
这让我一度怀疑后端获取文件后缀名的代码有问题。针对获取后缀名的代码单独做了测试后，确认了不是这段代码的的问题。
 
// 后端获取文件后缀名的代码
String extension = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf(".") + 1);
那么问题应该是出现在前端了，也就是说，前端传过来的文件名称有问题，而且在观察前端请求时证明了这一猜想。
 
Note: 前端使用vue-cropper插件进行图片切割头像，将切割后的头像转为blob文件上传。所以需要在前端进行调整了。
 
在上传图片时，给formData的append方法第三个参数设置为文件的名称即可。
 
formData的append可以接受三个参数，通过第三个参数我们可以手动设置fileName参数：
 
 
formData.append(“file”, file, this.fileName);
 
具体的调整见如下代码，预上传图片时获取到文件名称赋值给全局变量this.fileName = file.name;，在真正发送请求时，设置到formData的append方法第三个参数。
 
If you have any questions or any bugs are found, please feel free to contact me.
 
Your comments and suggestions are welcome!
                    最近为了响应系统对安全方面的要求，我们做的整改之一是对文件上传部分，除了在前端页面上限制用户可以选择的文件类型，还在后端接口中新增了对文件后缀名（这里主要是图片）的限制，核心代码如下。针对获取后缀名的代码单独做了测试后，确认了不是这段代码的的问题。那么问题应该是出现在前端了，也就是说，前端传过来的文件名称有问题，而且在观察前端请求时证明了这一猜想。插件进行图片切割头像，将切割后的头像转为blob文件上传。可是通过前端上传文件后，后端持续报错：无效的文件格式，见鬼。方法第三个参数设置为文件的名称即可。
Blob基本用法
Blob对象
Blob对象指的是字节序列，并且具有size属性，是字节序列中的字节总数，和一个type属性，它是小写的ASCII编码的字符串表示的媒体类型字节序列。
size:以字节数返回字节序列的大小。获取时，符合要求...
				
学习了一下客户端和服务器利用ajax上传图片的技术。利用了ajax的post方法和nodejs的http、fs模块
没有用formdata。直接上传blob和base64.
上传和接收blob
客户端代码：直接上传blob数据
				
//得到blob格式图片
String fileUrl = "url";  Blob blob1 = vo.getPicture();  InputStream image=null;  if (blob1 != null &amp;&amp; blob1.length() &gt; 0) {   java.io.FileOutputStream fout = null;
//写入流中   f...
const reader = new FileReader();
reader.onload = (event) => {
  const binaryData = event.target.result;
  // 发送请求将二进制数据传给后端
reader.readAsBinaryString(file);
在后端，你可以使用Java的JDBC API将二进制数据存入数据库中。假设你使用的是MySQL数据库，下面是一个将二进制数据存入Blob类型字段的示例代码：
```java
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
public class PhotoUploader {
    public static void main(String[] args) {
        // 连接数据库
        Connection conn = null;
        try {
            Class.forName("com.mysql.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/test";
            String username = "root";
            String password = "password";
            conn = DriverManager.getConnection(url, username, password);
        } catch (Exception e) {
            e.printStackTrace();
            return;
        // 获取二进制数据
        InputStream is = request.getInputStream();
        // 存入数据库
        PreparedStatement ps = null;
        try {
            ps = conn.prepareStatement("INSERT INTO photos (photo) VALUES (?)");
            ps.setBinaryStream(1, is, is.available());
            ps.executeUpdate();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try { ps.close(); } catch (Exception e) {}
            try { conn.close(); } catch (Exception e) {}
在上面的代码中，我们使用`ps.setBinaryStream()`方法将二进制数据存入Blob类型字段。注意，`is.available()`方法返回的是二进制数据的长度，所以我们可以直接将`InputStream`对象传给`setBinaryStream()`方法。最后，别忘了关闭`PreparedStatement`和`Connection`对象。