时间戳

首页 > 解决方案 > 如何使用axios从imagePicker上传图片

react-native - 如何使用axios从imagePicker上传图片

问题描述

我试图在邮递员中将文件图像上传到 API 工作正常，但是当我尝试从 ImagePicker 中的文件图像时不起作用。

我认为创建表单数据时做错了什么

处理程序

ImagePicker.showImagePicker(optionsImagePicker, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    // const source = { image: response.data };
    let photo = { uri: response.uri}
    let formdata = new FormData();
    
    formdata.append("product[name]", 'test')
    formdata.append("product[price]", 10)
    formdata.append("product[category_ids][]", 2)
    formdata.append("product[description]", '12dsadadsa')
    formdata.append("product[images_attributes[0][file]]", {uri: photo.uri, name: 'image.jpg', type: 'image/jpeg'})
    

    updateProfilePic(formdata)

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    // this.setState({
    //   avatarSource: source,
    // });
  }
});

服务

export function uploadImageProfile(data: any): Promise<any> {

  const config = {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  };
  return api.post('/users/profilepic', {image: data}, config).then((res) => {
    console.log(res.data);
    return res.data;
  });
}

标签： react-nativeaxios

解决方案

您的表单数据必须是这样的。

formdata.append('file',{
    uri: Platform.OS === 'android' ? photo.uri : 'file://' + photo.uri,
    name: 'test',
    type: 'image/jpeg' // or your mime type what you want
});

然后

axios.post('/users/profilepic', formdata, config).then((res) => {
    console.log(res.data);
    return res.data;
  });

推荐阅读