javascript - 如何在 JSP 文件中使用 JavaScript、jQuery、Ajax 从前端上传多个图像并将其发送到 Spring Boot Controller？

Question

我正在开发一个 Spring Boot Web 应用程序，我想一次上传产品的多个图像以及其他字段（例如产品名称、SKU 代码、类别、标签、子类别等）。我已经为 RESTful API 编写了代码来上传多个图像，它对我来说非常适合。我使用邮递员测试了 API，它工作正常。但是，我不知道如何从前端做到这一点。我在下面向您展示我的前端代码，其中我使用 Ajax 将单个图像发送到我的控制器。

    $("#file").change(function(){
            var formData = new FormData();
              var fileSelect = document.getElementById("file");
              if(fileSelect.files && fileSelect.files.length == 1) {
                  var file = fileSelect.files[0];
                  formData.set("file",file,file.name);
                  }else{
                      $("#file").focus();
                      return false;
                  }
              var request = new XMLHttpRequest();
              try {
                    request.onreadystatechange=function() {
                        if(request.readyState==4) {
                            var v = JSON.parse(request.responseText);
                            if(v.status==="OK") {
                                alert("Product Image Uploaded Successfully")
                                document.getElementById('imagepath').value = v.response;
                              }
                          }
                    }
                      request.open('POST',"<%=AkApiUrl.testuploadfile%>");
                      request.send(formData);
                  } catch(e) {
                      swal("Unable to connect to server","","error");
                  }
          });

正如我告诉你的，上面的代码是一次发送一个文件。我还向您展示了我的 API 控制器代码：

@RequestMapping(value = AkApiUrl.testuploadfile, method = { RequestMethod.POST, RequestMethod.GET }, produces = {MediaType.APPLICATION_JSON_VALUE }) public ResponseEntity<?> testuploadfile(HttpServletRequest request, @RequestParam("files") MultipartFile[] files) {
        CustomResponse = ResponseFactory.getResponse(request);
        String imgurl = "NA";
        try {
            String path = Constants.webmedia;
            String relativepath = "public/media/";
            System.out.println("Here is the image: ");
            List<MultipartFile> multifile = Arrays.asList(files);
            if( null != multifile && multifile.size()>0) {
                for (int i=0; i < multifile.size(); i++) {
                    String filename = files[i].getOriginalFilename();
                    String extension = filename.substring(filename.lastIndexOf("."), filename.length());
                    int r = (int )(Math.random() * 500 + 1);
                    SimpleDateFormat format = new SimpleDateFormat("yyyyMMddhhmmss");
                    Date date = new Date();
                    String formatdate = format.format(date);
                    formatdate = "ECOM" + formatdate + r;
                    byte[] bytes = files[i].getBytes();
                    BufferedOutputStream stream = new BufferedOutputStream( new FileOutputStream(new File(path + File.separator + formatdate + extension)));
                    stream.write(bytes);
                    stream.flush();
                    stream.close();
                    String newimgurl = relativepath + formatdate + extension;
                    imgurl = imgurl+"##"+newimgurl;
                    if(imgurl != null) {
                        CustomResponse.setResponse(imgurl);
                        CustomResponse.setStatus(CustomStatus.OK);
                        CustomResponse.setStatusCode(CustomStatus.OK_CODE);

                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            CustomResponse.setResponse(null);
            CustomResponse.setStatus(CustomStatus.Error);
                CustomResponse.setStatusCode(CustomStatus.Error_CODE);
                CustomResponse.setResponseMessage(CustomStatus.ErrorMsg);
            }
        return new ResponseEntity<ResponseDao>(CustomResponse, HttpStatus.OK);
    }

这个 API 工作正常，我得到了想要的响应。但是我不知道我应该如何在JSP页面上实现这个东西。请，任何建议将不胜感激。

标签： javascriptjqueryajaxspringspring-boot