将图像从angular上传到springboot

8dtrkrch 于 2021-07-23 发布在 Java

关注(0)|答案(2)|浏览(423)

我花了几个小时把图像从angular发送到springboot。现在我得到一个错误：
org.springframework.web.multipart.multipartexception:当前请求不是多部分请求
前端（Angular ）代码如下所示：

saveProduct(productSave: ProductSave, mainImg: File, imageList: File[]): Observable<any>
  {
    const formData = new FormData();
    const formListData = new FormData();

    formData.append('mainImg', mainImg, mainImg.name);

    imageList.forEach( img => formListData.append('imageList', img));

    return this.httpClient.post<ProductSave>(this.saveUrl, {productSave, mainImg, imageList});
  }

mainimg和imagelist是从用户上传的图像，初始化如下：

mainImg = event.target.files[0];
imageList.push(event.target.files[0]);

我的后端（springboot）代码如下所示：

@PostMapping("/save")
    public void saveProduct(@RequestBody ProductSave productSave, @RequestParam("mainImg")MultipartFile main, @RequestParam("imageList")MultipartFile[] multipartFiles)
    {
        System.out.println(productSave.getProduct().getName());
    }

我真的不知道如何发送这些图像，我试图看看堆栈周围，但我失败了。
谢谢你的帮助！

Java spring spring-boot multipartform-data Angular

来源：https://stackoverflow.com/questions/66257955/upload-images-from-angular-to-springboot

2条答案

按热度按时间

tzxcd3kk1#

问题出在spring引导控制器方法参数中。
在multipart请求中，您可以发送json请求主体。相反，您必须发送键值对。
所以，你有两种方法去做你想做的事-
发送json字符串，然后反序列化它。
spring boot api示例：-

@PostMapping("/save")
        public String create(@RequestPart("file")MultipartFile multipartFile, @RequestPart("files") List<MultipartFile> multipartFiles, @RequestPart("jsonString") String jsonString) {
/**To convert string to POJO        
 com.fasterxml.jackson.databind.ObjectMapper objectMapper = new com.fasterxml.jackson.databind.ObjectMapper();

                 ProductSave productSave = this.objectMapper.readValue(jsonString,ProductSave.class);**/
                return jsonString;
       }

html/javascript示例：-

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type="file" id="file">
  <button onclick="submitData()">Submit Data</button>
  <script type="text/javascript">
    function submitData() {
      const formData = new FormData();
      const fileField = document.querySelector('input[id="file"]');

      formData.append('jsonString', JSON.stringify({document: {data: 'value'}}));
      formData.append('file', fileField.files[0]);
      Array.from(fileField.files).forEach(f => formData.append('files', f));

      fetch('http://localhost:8080/save', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(result => {
        console.log('Success:', result);
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }

  </script>
</body>

在前面end:-

JSON.stringify(product);

以字节数组形式发送文件，在这种情况下不需要在前端使用表单数据。
您可以在前端将文件对象转换为字节数组using:-

const fileToByteArray = async (file) => {
  return new Promise((resolve, reject) => {
    try {
      let reader = new FileReader();
      let fileByteArray = [];
      reader.readAsArrayBuffer(file);
      reader.onloadend = (evt) => {
        if (evt.target.readyState === FileReader.DONE) {
          const arrayBuffer = evt.target.result;
          const array = new Uint8Array(arrayBuffer);
          array.forEach((item) => fileByteArray.push(item));
        }
        resolve(fileByteArray);
      };
    } catch (e) {
      reject(e);
    }
  });
};

赞(0）回复(0）举报 2021-07-23

k3bvogb12#

在 application.properties 尝试设置以下内容-

spring.servlet.multipart.max-file-size=1024KB
spring.servlet.multipart.max-request-size=1024KB
spring.http.multipart.enabled=false

玩弄那玩意儿 max-file-size .

赞(0）回复(0）举报 2021-07-23

我来回答

将图像从angular上传到springboot

2条答案

相关问题

热门标签

最新问答