Question

我正从桌面上传图片，并将此图片转换为javascript中的基本代码。之后我想用multipart请求将这个图像基本代码发送到spring控制器。但我没有使用Form。

HTML

 <input id="inputFileToLoad" type="file"  onchange="encodeImageFileAsURL()">

JAVA SCRIPT

 window.photoCakeUrl = '<c:url value="/media/image/upload"/>';
      function encodeImageFileAsURL() {
                var filesSelected = document.getElementById("inputFileToLoad").files;
                if (filesSelected.length > 0) {
                    var fileToLoad = filesSelected[0];
                    var fileReader = new FileReader();
                    fileReader.onload = function (fileLoadedEvent) {
                        var srcData = fileLoadedEvent.target.result; // <--- data: base64
                        var newImage = document.createElement('img');
                        var photoCake = srcData;
                        newImage.src = srcData;
                        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
                        var ajax1 = $.ajax({
                            type: 'POST',
                            url: photoCakeUrl,
                            processData: false, // important
                            contentType: false, // important
                            dataType: 'json',
                            data: {photoCak: photoCake}
                        });

                      });

                    },
                            fileReader.readAsDataURL(fileToLoad);
                }
            }

弹簧控制器：

@RequestMapping(value = "/media/image/upload", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, String> productPictureUploadnew(MultipartHttpServletRequest request, HttpServletResponse response) {
        Map<String, String> resp = new HashMap<>();
        String photoCake = request.getParameter("photoCak");


        System.out.println("photoCake   " + photoCake);

        return resp;
    }

但是当我生成AJAX调用时，将出现500错误。如果我正在使用

public Map<String, String> productPictureUploadnew(HttpServletRequest
 request, HttpServletResponse response)

然后它有效。这意味着当我使用 MultipartHttpServletRequest HttpServletRequest时请求然后它不起作用。

Answer 1

我得到了解决方案，我们可以在javascript中使用formData，而无需在任何JSP中使用表单来发送MultipartHttpServletRequest。

getDocumentPartitioning

var formData = new FormData（）;
formData.append（“imgFile”，document.getElementById（“inputFileToLoad”）。files [0]）;

<强>控制器：

 window.photoCakeUrl = '<c:url value="/media/image/upload"/>';
      function encodeImageFileAsURL() {
                var filesSelected = document.getElementById("inputFileToLoad").files;
                if (filesSelected.length > 0) {
                    var fileToLoad = filesSelected[0];
                    var fileReader = new FileReader();
                    fileReader.onload = function (fileLoadedEvent) {
                        var srcData = fileLoadedEvent.target.result; // <--- data: base64
                        var newImage = document.createElement('img');
                        var photoCake = srcData;
                        newImage.src = srcData;
                        document.getElementById("imgTest").innerHTML = newImage.outerHTML;

                        var formData = new FormData();
                        formData.append("imgFile", document.getElementById("inputFileToLoad").files[0]);

                        var ajax1 = $.ajax({
                            type: 'POST',
                            url: photoCakeUrl,
                            dataType: 'json',
                            data: {photoCak: photoCake}
                        });

                      });

                    },
                            fileReader.readAsDataURL(fileToLoad);
                }
            }

谢谢你，我希望这对你们有帮助。

Answer 2

你发送它作为multipart / form-data可能就是为什么HttpServletRequest无法获取你的数据，从ajax调用中删除contentType选项然后jquery将使用defaylt wiz。 “应用程序/ x-WWW窗体-urlencoded;字符集= UTF-8'

var ajax1 = $.ajax({
                       type: 'POST',
                        url: photoCakeUrl,
                        processData: false, // important
                        dataType: 'json',
                        data: {photoCak: photoCake}
                    });

Answer 3

我就是这样做的：

window.photoCakeUrl = '<c:url value="/media/image/upload"/>';
window.URL = window.URL || window.webkitURL

function encodeImageFileAsURL() {
  var filesSelected = $('#inputFileToLoad')[0].files;

  if (filesSelected.length) {
    var fileToLoad = filesSelected[0];
    var img = new Image();
    var formData = new FormData();

    formData.append('imgFile', fileToLoad);

    img.onload = function() {
      // only append the image once it's loaded so we don't append broken images
      $('#imgTest').html(this);
      URL.revokeObjectURL(this.src); // Release memory
      // Uploading a image when we can ensure it's a image that can be loaded
      fetch(photoCakeUrl, {method: 'POST', body: formData});
    }

    img.onerror = function() {
      // You didn't upload a image
    }

    img.src = URL.createObjectURL(srcData);
  }
}

URL.createObjectURL是faster并使用较少的内存，然后使用较长的base64字符串，其大小也大约3倍，并且因为它存储在utf16而不是utf8，所以使用的内存量增加了2倍
您可以使用new Image，这是createElement('img')
然后我也会使用Fetch代替$.ajax cuz jQuery handle formData stupidly（需要将processData＆amp; contentType设置为false）
然后我还会将accept="images/*"属性添加到文件输入中以过滤图像

从ajax发送多部分请求到没有形式的弹簧控制器？

3 个答案: