How to Solve Image Upload Error: Uncaught (in promise) DOMException: Failed to execute ‘put‘ on ‘IDBObjectStore‘

Leave a reply

I encountered a small problem in a recent project，when the system uploads pictures on the front-end page，the background reports 400 errors: Uncaught (in promise) DOMException: Failed to execute ‘put’ on ‘IDBObjectStore ‘: HTMLInputElement object could not be cloned.

Investigation ideas

  1. Analyze from the error 400，http status code is 400，bad request means it is a bad request，invalid hostname means the domain name does not exist. The cause of 400 is generally:
  • The field name or field type of the data submitted by the front-end is inconsistent with the entity class of the back-end, which cannot be encapsulated.
  • The data submitted by the front-end to the back-end should be of json string type, and the front-end has no conversion type.
    Since the back-end interface uses File to receive the picture, the file transmitted by the front-end through the form form, obviously has nothing to do with the parameter type.
  1. So breakpoint debugging at the Controller layer, found that the request did not enter the breakpoint at all， This is a bit strange.
    Roll back the code and repackage it for deployment， This picture can be uploaded normally.
  2. Change my way of thinking to find the answer from the code submission records, I browsed carefully, I found that a colleague submitted a filter, This is a bit relevant, Immediately click in to see the source code. After viewing, it was found that a filter， was added for the POST request, and the file stream was not excluded in the filte, which resulted in the file upload request being directly filtered out.

Solution

Exclude specific requested URLs in SpringBoot filters, example below：

@WebFilter(urlPatterns = "/*")
@Order(value = 1)
public class TestFilter implements Filter {
  
    private static final Set 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("[/]+$", "&# 34;);
        boolean excludedPath = EXCLUDED_PATHS.contains(path);
  
        if (excludedPath) {
            // Exclude URLs that do not need filtering
            chain.doFilter(req, res);
        } else {
            // URL that needs to be filtered
            // TODO
        }
    }
  
    @Override
    public void destroy() {
        // destroy filter
    }
}

Read More:

Leave a Reply

Your email address will not be published. Required fields are marked *