有没有办法用@PathVariable 传递文件？答案

【问题标题】：Is there a way to pass file with @PathVariable?有没有办法用@PathVariable 传递文件？
【发布时间】：2017-12-18 16:11:13
【问题描述】：

我有一个 ajax 帖子从 url 发布一些值

var sendUrl = url + ',' + testId + ',' +questionId + ',' + questionRevision + ',' + result;   
 var ajaxData = {
                type: "POST",
                contentType : 'application/json; charset=utf-8',
                dataType : 'json',
                data: requestData,
                url: sendUrl,
                headers: headersData,
        };

并像这样使用@PathVariable 绑定它们：

@RequestMapping(value="/answer,{testId},{qid},{qrev},{qres}", method = RequestMethod.POST)
    public @ResponseBody String answer(HttpServletRequest request, 
                            @RequestBody List<NokDataDTO> nokInfoDtos ,
                            @PathVariable("testId") Long testId,
                            @PathVariable("qid") Long qid,
                            @PathVariable("qrev") Integer qrev,
                            @PathVariable("qres") Integer qres)

在这种情况下，有没有办法使用@PathVariable 传递图像文件？我可以像这样从 javascript 获取上传的文件：

var fileVal=document.getElementById("fileLoader").files[0];

但无法从 RequestMapping 中找到绑定它的方法。

【问题讨论】：

您可以将图像转换为 base64 字符串和 POST，就像其他值一样。见：stackoverflow.com/questions/6150289/…

标签： javascript java ajax spring-mvc

【解决方案1】：

当您准备好将数据发送到服务器时，您可以使用 element.files[0] 属性从元素中获取文件，然后将其转换为可以像其他值一样发送到服务器的 base64 字符串。

const file = document.getElementById("fileLoader").files[0];

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
  // Post to server
  const base64Img = reader.result;
};
reader.onerror = function(error) {
  console.log('Error: ', error);
};

【讨论】：

嗨@luke ，当我尝试将 reader.result 作为 url 参数发送时，它会显示 URI is too large >8192 。在服务器端，我打算像这样绑定它：@PathVariable("photo") String photo
那么您需要在正文中发布数据，而不是将其添加到 URL 中。否则，正如您所遇到的，您将超出 URL 字符限制。
使用 FormData 可能吗？我应该如何通过这个 POST 传递它？ var fd = new FormData(); fd.append('照片', 文件); var ajaxData = { type: "POST", contentType : 'application/json; charset=utf-8', dataType : 'json', data: requestData, url: sendUrl, headers: headersData, };然后我需要同时使用看起来很棘手的@PathVariable 和@RequestParam(value="photo")。
使用@RequestBody 标签，您需要更改您要绑定的模型，以包含base64 字符串。在 JS 端，您将在 POST 之前将 base64 字符串添加到 requestData 对象。
我收到 Uncaught TypeError: Illegal invocation 错误。如果你能写示例代码，我会很高兴？

【解决方案2】：

我找到了使用 javascript FormData() 的解决方案。获取文件并将所有值附加到 FormData 并将其作为 formData 对象发布，如下所示：

   const file=document.getElementById("fileLoader").files[0];
        var fd = new FormData();
        fd.append('photo', file);
        fd.append('testId', testId);
         var ajaxData = {
            type: "POST",
            data: fd,
            processData : false,
            contentType : false,
            url: sendUrl,
            headers: headersData,
    };

在后端，将它们与参数名称绑定：

@RequestMapping(value="/answer", method = RequestMethod.POST)
    public @ResponseBody String answer(HttpServletRequest request, 
            @RequestParam(value = "photo") MultipartFile photo,
            @RequestParam(value = "testId") String testId

它对我有用。

【讨论】：