解决上传图片时报错Uncaught (in promise) DOMException: Failed to execute ‘put‘ on ‘IDBObjectStore‘

最近项目中遇到一个小问题，系统在前端页面上传图片时，后台报400错误：Uncaught (in promise) DOMException: Failed to execute ‘put’ on ‘IDBObjectStore’: HTMLInputElement object could not be cloned.

排查思路

1. 从报错400来分析，http状态码为400，bad request表示是错误的请求，invalid hostname表示域名不存在。而造成400的原因一般是：

• 前端提交数据的字段名称或者是字段类型和后台的实体类不一致，导致无法封装。
• 前端提交的到后台的数据应该是 json 字符串类型，而前端没有转换类型。
  由于后端接口用File接收图片，前端通过form表单方式传的file文件，明显跟参数类型无关。

2. 于是在Controller层打断点调试，发现请求根本没有进断点，这就有点奇怪了。
   将代码回滚后重新打包部署，这下图片能够正常上传。
3. 转变思路从代码提交记录中寻找答案，仔细浏览了一遍，发现有同事提交了一个过滤器，这就有点相关性了，马上点进去看源码。查看后发现是针对POST请求新增了一个过滤器，而过滤器中没有对文件流进行排除，导致文件上传请求直接被过滤掉。

解决办法

在SpringBoot过滤器中排除特定请求的URL，示例如下：

@WebFilter(urlPatterns = "/*")
@Order(value = 1)
public class TestFilter implements Filter {
  
    private static final Set<String> EXCLUDED_PATHS = Collections.unmodifiableSet(new HashSet<>(
            Arrays.asList("/login", "/register")));
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // init filter
    }
  
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        String path = request.getRequestURI().substring(request.getContextPath().length()).replaceAll("[/]+$", "");
        boolean excludedPath = EXCLUDED_PATHS.contains(path);
  
        if (excludedPath) {
            // 排除不需要过滤处理的URL
            chain.doFilter(req, res);
        } else {
            // 需要过滤处理的URL
            // TODO
        }
    }
  
    @Override
    public void destroy() {
        // destroy filter
    }
}

参考文章：https://www.jb51.net/article/232877.htm