IONIC HTTP post multipart/form-data - 图像与 JSON 一起上传

Posted 2023-02-24

【中文标题】IONIC HTTP post multipart/form-data - 图像与 JSON 一起上传

【英文标题】：IONIC HTTP post multipart/ form-data - Image Upload along with JSON

【发布时间】：2018-07-16 18:28:21

【问题描述】：

我正在尝试通过 HTTP Post 分段上传图像和表单数据。当我尝试使用邮递员时，我可以上传，但是当我尝试将文件连同表单数据作为多部分请求上传时，我会收到错误的请求错误。我非常感谢您的意见。已经为此工作了 2 天。

我的后端是 Spring： 后端代码：

  @RequestMapping(value = "/lender/signup", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE, produces =MediaType.APPLICATION_JSON_VALUE)

   @ResponseStatus(HttpStatus.CREATED)

    Object signUpLender(@RequestPart("file") MultipartFile file, 

    @RequestPart("lender") LenderInfo lenderRequest) throws Exception 

    log.info("SignUp Received, preparing to process lender")
    lenderRequest.base64Logo = mediaService.getBase64Media(file)
    Optional<Object> lenderInfo = Service.signUpLender(lenderRequest)
    log.info("Fetched LenderInfo: $lenderInfo.get()")
    lenderInfo.get()

前端::离子：

 uploadImage() 
    // Destination URL
    var url = LENDER_URL;

    // File for Upload
    var targetPath = this.pathForImage(this.correctPath);

    // File name only
    var filename = this.correctPath;
      //const filetransfer: TransferObject = this.transfer.create();
    var options = 
        fileKey: "file",
        fileName: this.currentName,
        chunkedMode: false,
        mimeType: "multipart/form-data",
        params: 'lender':this.userData,
            'file':this.currentName,
        httpMethod:'POST'
    ;
      let headers = new HttpHeaders();
      headers.append('Content-Type', undefined);
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS,PUT');
        this.formData.then((_)=>
            this.loading = this.loadingCtrl.create(
                content: 'Uploading...',
            );
            this.loading.present();
            this.network.postService(url,options,headers).then(()=>
                this.loading.dismissAll();
                this.presentToast('Image succesful uploaded.');
            , err => 
                this.loading.dismissAll();
                console.log(JSON.stringify(err));
                this.presentToast('Error while uploading file.');
            );
        ,err=>JSON.stringify(err));

在 Postman 中，当我尝试访问端点时，我可以在选择图像（文件）和 JSON 作为文件时发布值。请让我知道您的意见。

谢谢

【参考方案1】：

我已经经历过了，解决它的一种方法是指定类型 @RequestPart (value = "nameOfResource" and consumes = "multipart/form-data"

不要忘记在 Ionic 中指定 Content 的名称。希望对你有帮助。

下面是一个 Java 示例：

RequestMapping(value = "/add", method = RequestMethod.POST, consumes = "multipart/form-data", produces = "application/json")
        public ResponseEntity<?> add(@RequestPart(value = "image", required = true) MultipartFile image, 
                                     @RequestPart(value = "team", required = true) @Valid Team team, BindingResult bResult) 

【讨论】：

感谢您的回复。当我在邮递员中尝试时，后端对我来说很好，它可以工作。我担心如何将图像和表单数据作为来自 Ionic 的多部分请求发送。任何输入都将不胜感激。