Question

在我的应用程序编辑配置文件页面中，我无法通过API将图像从图像选择器上传到服务。我选择图像没有任何问题。也可以发送编辑名字的姓氏电话号码，但由于某种原因无法发送图片上传

这是我的代码：

状态：

class Profile extends Component {
  state = {
    user: {
      mobile_number: this.props.phoneNumber,
      first_name: this.props.firstName,
      last_name: this.props.lastName,
      image: {
        url: this.props.profileImage
      }
    },
    activity: false,
    editButtonStatus: false,
    photoUploadStatus: false,
    photoUploadUrl: ""
  };

这是我的图像选择器，我也使用FormData。

//Upload image from Liblary
  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    });

    console.log(result);
    this.setState({ ...this.state, photoUploadStatus: false });
    this.setState({ ...this.state, photoUploadUrl: result.uri });
    var data = new FormData();
    data.append("image", {
      uri: result.uri,
      type: result.type,
      width: result.width,
      height: result.height
    });
    this.setState({
      ...this.state,
      user: {
        ...this.state.user,
        image: { url: this.state.photoUploadUrl.replace("file://", "") }
      }
    });

    console.log(this.state);
    if (!result.cancelled) {
      //this.setState({ ...this.state, user: { image: { url: result.uri } } });
      this.setState({ ...this.state, photoUploadUrl: result.uri });
    }
  };

这是我的Axios请求

edit = () => {
    console.log(this.state);
    if (this.state.editButtonStatus === false) {
      this.setState({ editButtonStatus: true });
    } else {
      this.setState({ editButtonStatus: false });
      if (this.state.editButtonStatus !== false) {
        this.setState({ activity: true });

        Axios.put(
          EDIT_PROFILE_API,
          { user: this.state.user },
          {
            headers: { appversion: 1.4, apisecret: this.props.api_secret }
          }
        )
          .then(response => {
            console.log(response);
            const status = response.status;
            if (status === 200) {
              this.setState({ activity: false });
              console.log(response);
              const userData = response.data;
              this.props.dispatch(loginSuccessful(userData));
              console.log(this.state);
              Alert.alert("Support", "Profile Successfully Updated");
            }
          })
          .catch(error => {
            console.log({ error });
            this.setState({ activity: false });
            alert(error.response.data.error);
          });
      }
    }
  };

Answer 1

您需要包括axois请求的内容类型

 Axios.put(
          EDIT_PROFILE_API,
          { user: this.state.user },
          {
            headers: { 
               appversion: 1.4, 
               apisecret: this.props.api_secret ,
               'Content-Type: 'multipart/form-data' // add this
} 
          }
        )

Axios React Native无法从图像选择器上传照片

1 个答案: