javascript - 如何使用JavaScript将文件作为多部分文件上传到后端？

This question already has answers here:

Send a file as multipart through xmlHttpRequest

（2个答案）

3个月前关闭。

我是新来的！我正在尝试开发一个微服务应用程序以接收数据（json或xml）并将其存储到数据库。我不知道如何使用javascript链接前端和后端。

这是我的WordController代码：

@RequestMapping(value = "/uploadFile",
        method = RequestMethod.POST,
        consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

public String fileUpload(@RequestParam("file") MultipartFile file) throws IOException
{
    File convertFile = new File(file.getOriginalFilename());
    convertFile.createNewFile();

    try (FileOutputStream fout = new FileOutputStream(convertFile))
    {
        fout.write(file.getBytes());
    }
    catch (Exception exe)
    {
        exe.printStackTrace();
    }

     ObjectMapper mapper = new ObjectMapper();
     TypeReference<List<Word>> typeReference = new TypeReference<List<Word>>(){};

        try {

            List<Word> words = mapper.readValue(convertFile,typeReference);
            wordServiceFile.save(words);

            return ("Words saved!");

        } catch (IOException e){

            return ("Unable to save words: " + e.getMessage());

        }

}

和JS：

 function addListWords() {

  var data = document.getElementById('inputFile').files[0];

  var xhr = new XMLHttpRequest();

  xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
          console.log(this.responseText);
      }
  });

  xhr.open("POST", "http://localhost:8080/word/uploadFile");
  xhr.send(data);

}

和HTML代码：

<!-- Add list of words -->
                            <div class="col-sm-6 col-md-6">
                                <h2 class="font-weight-light">Add list of words </h2>
                                <div class="form-group">
                                    <label for="FichierAdd">File</label>
                                    <input type="file" class="form-control-file" id="inputFile"><br>
                                    <button onclick="addListWords()" type="button" class="btn btn-success center-block" >Add List</button>
                                </div><br><br><br><br>

我得到这个错误：

{“时间戳”：“ 2020-03-27T15：30：29.823 + 0000”，“状态”：415，“错误”：“不支持的媒体类型”，“消息”：“内容类型'application / json'不支持” ，“ trace”：“ org.springframework.web.HttpMediaTypeNotSupportedException：内容类型'application / json'不支持\ r \ n \ tat org.springframework.web.servlet.mvc.method.RequestMappingInfoHandlerMapping.handleNoMatch（RequestMappingInfoHandlerMapping.java:227 ）\ r \ n \ tat org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.lookupHandlerMethod（AbstractHandlerMethodMapping.java:421）\ r \ n \ tat org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.getHandlerInternal（AbstractHandlerMethodMapping.java ：367）\ r \ n \ tat org.springframework.web.servlet.mvc.method.RequestMappingInfoHandlerMapping.getHandlerInternal（RequestMappingInfoHandlerMapping.java:110）\ r \ n \ tat org.springframework.web.servlet.mvc.method.RequestMappingInfoHandlerMapping .getHandlerInternal（RequestMappingInfoHandlerMapping.java:59）\ r \ n \ tat org.springframework.web.se rvlet.handler.AbstractHandlerMapping.getHandler（AbstractHandlerMapping.java:395）\ r \ n \ tat org.springframework.web.servlet.DispatcherServlet.getHandler（DispatcherServlet.java:1234）\ r \ n \ tat org.springframework.web。 servlet.DispatcherServlet.doDispatch（DispatcherServlet.java:1016）\ r \ n \ tat org.springframework.web.servlet.DispatcherServlet.doService（DispatcherServlet.java:943）\ r \ n \ tat org.springframework.web.servlet。 FrameworkServlet.processRequest（FrameworkServlet.java:1006）\ r \ n \ tat org.springframework.web.servlet.FrameworkServlet.doPost（FrameworkServlet.java:909）\ r \ n \ tat javax.servlet.http.HttpServlet.service（ HttpServlet.java:660)\r\n\tat org.springframework.web.servlet.FrameworkServlet.service（FrameworkServlet.java:883）\ r \ n \ tat javax.servlet.http.HttpServlet.service（HttpServlet.java： 741）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter（ApplicationFilterChain.java:231）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.doFilter（ApplicationFilterChain.java:166） \ r \ n \ tat org.apache.tomcat.websocket.server.WsFilter.doFilter（WsFilter.java:53）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter（ApplicationFilterChain.java:193）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.doFilter（ApplicationFilterChain.java:166）\ r \ n \ tat org.springframework.web.filter.RequestContextFilter.doFilterInternal（RequestContextFilter.java:100）\ r \ n \ tat org.springframework.web.filter.OncePerRequestFilter.doFilter（OncePerRequestFilter.java:119）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter（ApplicationFilterChain.java:193）\ r \ n \ tat org .apache.catalina.core.ApplicationFilterChain.doFilter（ApplicationFilterChain.java:166）\ r \ n \ tat org.springframework.web.filter.FormContentFilter.doFilterInternal（FormContentFilter.java:93）\ r \ n \ tat org.springframework .web.filter.OncePerRequestFilter.doFilter（OncePerRequestFilter.java:119）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter（ApplicationFilterChain.java:193）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.doFilter（ApplicationFilterChain.java:166）\ r \ n \ tat org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal（CharacterEncodingFilter.java:201）\ r \ n \ tat org.springframework.web.filter.OncePerRequestFilter.doFilter（OncePerRequestFilter.java:119）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter（ApplicationFilterChain.java:193）\ r \ n \ tat org.apache.catalina.core.ApplicationFilterChain.doFilter（ApplicationFilterChain.java:166）\ r \ n \ tat org.apache.catalina.core.StandardWrapperValve.invoke（StandardWrapperValve.java:202）\ r \ n \ tat org .apache.catalina.core.StandardContextValve.invoke（StandardContextValve.java:96）\ r \ n \ tat org.apache.catalina.authenticator.AuthenticatorBase.invoke（AuthenticatorBase.java:541）\ r \ n \ tat org.apache .catalina.core.StandardHostValve.invoke（StandardHostValve.java:139）\ r \ n \ tat org.apache.catalina.valves.ErrorReportValve.invoke（ErrorReportValve.java:92）\ r \ n \ tat org.apache.catalina .core.St andardEngineValve.invoke（StandardEngineValve.java:74）\ r \ n \ tat org.apache.catalina.connector.CoyoteAdapter.service（CoyoteAdapter.java:343）\ r \ n \ tat org.apache.coyote.http11.Http11Processor。服务（Http11Processor.java:367)\r\n\tat org.apache.coyote.AbstractProcessorLight.process（AbstractProcessorLight.java:65）\ r \ n \ tat org.apache.coyote.AbstractProtocol $ ConnectionHandler.process（AbstractProtocol。 java：868）\ r \ n \ tat org.apache.tomcat.util.net.NioEndpoint $ SocketProcessor.doRun（NioEndpoint.java:1639）\ r \ n \ tat org.apache.tomcat.util.net.SocketProcessorBase。运行（SocketProcessorBase.java:49)\r\n\tat java.base / java.util.concurrent.ThreadPoolExecutor.runWorker（ThreadPoolExecutor.java:1128）\ r \ n \ tat java.base / java.util.concurrent。 ThreadPoolExecutor $ Worker.run（ThreadPoolExecutor.java:628）\ r \ n \ tat org.apache.tomcat.util.threads.TaskThread $ WrappingRunnable.run（TaskThread.java:61）\ r \ n \ tat java.base / java.lang.Thread.run（Thread.java:834）\ r \ n“，”路径“：” / word / uploadFile“}

有人可以帮助我吗！

最佳答案

您可以使用javascript FormData对象发送文件

这是一个教程

https://developer.mozilla.org/pt-BR/docs/Web/API/FormData/FormData

关于javascript - 如何使用JavaScript将文件作为多部分文件上传到后端？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60889648/

上一篇：visual-studio-code - VSCode 1.14.0 7 月更新存在重大问题 : How to roll back?

下一篇：java - Sprint Reactor 过滤器与 IF then

相关文章：

Java实现加权图？

java - 使用 Java 8 的 Streams 和 Lambdas 表达式迭代集合时出现问题

Javascript - 如何清除 DIV 中的先前值？

javascript - 使用正则表达式仅解析 id

javascript - 使用客户端脚本检测访问者是否在索引页面上

javascript - 将 JavaScript 计时器函数转换为使用异步调用

java - 使用 webdriver API 实现 BDD (JBehave+Webdriver)

javascript - Mapbox.js 无法将 onclick 事件附加到弹出内容

html - 悬停后鼠标移开时反转不透明度动画

javascript - 如何让 JQuery 与 iCheck 插件一起工作