React本机上载映像Spring Boot

Question

我试图从react native应用程序上传一个映像到java spring boot服务器，但我无法使其工作。

userimage FormData {_parts: Array(1)}_parts: Array(1)0: Array(2)0: "photo"1: name: "file_photo"uri: "content://com.google.android.apps.photos.contentprovider/-1/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F47/ORIGINAL/NONE/226557028"__proto__: Objectlength: 2__proto__: Array(0)length: 1__proto__: Array(0)__proto__: Object

路径为[]的上下文中servlet[dispatcherServlet]的servlet.service（）引发异常[请求处理失败；嵌套异常为org.springframework.web.multipart.multipartException：解析多部分servlet请求失败；嵌套异常为java.io.ioException：org.apache.tomcat.util.http.FileUpload.FileUploadException：请求被拒绝，因为找不到多部分边界]有根本原因

org.apache.tomcat.util.http.FileUpload.FileUploadException：请求被拒绝，因为找不到多部分边界

Spring boot controller:
@PostMapping(value = "/signup", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResponseEntity<?> signupUser(@RequestParam("photo") MultipartFile photo) {
...
}

React native code:
openImagePicker = () => {
    ImagePicker.showImagePicker(this.options, async response => {
      this.setState({originUri: response.uri})
      const file = new FormData();
      file.append('photo', {
          uri: this.state.originUri,
          name: 'file_photo'
      });
      console.log('photo before resize: ', file)
      //here i call the register function(file)
}

function register(userImage) {

  console.log('photo from register api: ', file)

  return axios({ method: 'post', 
                baseURL: constants.BASE_URL,
                url: '/api/auth/signup',
                 headers: {
                   'Content-Type': 'multipart/form-data'
                 },
                data: userImage,
               })
        .then(res => {
          return res.data
         } ) 
        .catch( error => {
          console.log('error request api: ', error)

        });
}

Answer 1

我已经设法解决了：

本机反应：

--来自图像上载组件

openImagePicker = () => {
    ImagePicker.showImagePicker(this.options, async response => {
      this.setState({originUri: response.uri})
      let timestamp = +new Date;
      let fileName = timestamp + '_' + response.fileName;
      if (response.didCancel) {
          console.log('User cancelled image picker')
          return
      } else if (response.error) {
          console.log('ImagePicker Error: ', response.error)
          return
      } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton)
          return
      } else {
          const source = { uri: response.uri };
          this.setState({
            avatarSource: source,
          });
      }


      let { height, width, quality, format, avatarSource } = this.state

      // Resize and post the thumb 
      const resizedImageUri = await ImageResizer.createResizedImage(
          this.state.originUri,
          this.state.height,
          this.state.width,
          this.state.format,
          this.state.quality
      ).then(({uri}) => {
        let imageProperties = {
          uri: uri,
          name: fileName,
          type: 'image/png',
        }
        this.props.onUpload(imageProperties);
      })
    })
  }

--API调用注册

export function register(name, username, email, password, imageProperties) {
  let formDataPayload = new FormData();
  //IMPORTANT !!!!! this picture element form needs 3 parameters !!!!! : URL, NAME and TYPE
  formDataPayload.append('photo', {
    uri: imageProperties.uri,
    name: imageProperties.name,
    type: 'image/png',
  });
  formDataPayload.append('name', name);
  formDataPayload.append('username', username);
  formDataPayload.append('email', email);
  formDataPayload.append('password', password);
  return request({method: 'post', 
                  url: '/api/auth/signup/',
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  },
                  data: formDataPayload
                  })
}

JAVA SPRING引导：

@PostMapping(value = "/api/auth/signup/")
    public ResponseEntity<?> signupUser(HttpServletRequest request,
                                          @RequestParam("photo") MultipartFile photo,
                                          @RequestParam("name") String name,
                                          @RequestParam("username") String username,
                                          @RequestParam("email") String email,
                                          @RequestParam("password") String password,
                                        ) throws IOException {