图片未使用 react-native-image-crop-picker 上传到服务器答案

【问题标题】：Image not uploading to server using react-native-image-crop-picker图片未使用 react-native-image-crop-picker 上传到服务器
【发布时间】：2020-04-09 19:32:16
【问题描述】：

我正在使用 react-native-image-crop-picker 我可以从图库中选择图像，但是当尝试通过表单数据上传到服务器时，但图像没有上传到服务器，它在服务器上显示为空白。可以任何人都建议我如何使用 react-native-image-crop-picker 将多个图像上传到服务器？这将是非常可观的。谢谢。

【问题讨论】：

标签： react-native

【解决方案1】：

创建一个服务来处理文件上传

import axios from 'axios'; 
let config = {
    headers: {
    'Content-Type': 'multipart/form-data',
    'Accept': 'application/json'
    }
};

export const uploadService = (data,Path,jwtKey) => {
    if(jwtKey != ''){
        axios.defaults.headers.common['Authorization'] = 'Baerer '+jwtKey;
    }    
    try{
        return axios.post(
                            url,
                            data, 
                            config
                        );
    }catch(error){
        console.warn(error);
    }
}

在您的视图中创建一个上传处理程序，我在下面添加了一个示例

import { uploadService } from '../services/UploadService';

showProfileCropper = (data) => {

    ImagePicker.openCropper({
      path: data.uri,
      freeStyleCropEnabled: true,
      cropping: true,
      width: data.width,
      height: data.height,
      includeExif: true,
    }).then(image => {

      this.setState({
        image: { uri: image.path, width: image.width, height: image.height, mime: image.mime },
        images: null
      });
      this._uploadProfile(image);

    }).catch(e => {
        //console.warn(e)
    });

}


_uploadProfile = async (data) => {


    const jwtKey = '';
    this.setState({ uploading: true });
    let uploadData = new FormData();
    uploadData.append('pageId', this.state.pageId);
    uploadData.append('submit', 'ok');
    uploadData.append('uploadfile', { type: data.mime, uri: data.path, name: data.path.split("/").pop() });


    uploadService(uploadData, '', jwtKey).then((resp) => {
      this.setState({ uploading: false });
      //console.warn(resp.data);
      if (resp.data.success) {
        //this._getPageDataAfterUpload();
      }
    }).catch(err => {
      //console.warn(err);
    });


}


render(){

...........
    <TouchableOpacity
    style={styles.profileImgContain}
    onPress={() => { this.showProfileCropper(this.state.image); }}
    >
    <Text>Choose Image</Text>
    </TouchableOpacity>
...........
}

如果你有任何困难，请告诉我

【讨论】：

@LintonSamuelDawson 您需要通过设备检查，因为需要上传图像。你哪里出错了，你能用 $_FILES 和 $_REQUEST 从服务器端调试吗？
@LintonSamuelDawson 如果我的回答有用，您可以投票吗？

【解决方案2】：

在我的情况下，我收到 400 错误，因为在 android 中由于某种原因，文件名字段为空。所以我生成的文件名不可用。

name: image.filename || `${Date.now()}.jpg`,

例子：

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: cropping,
  multiple: true,
})
  .then((selImages) => {
    if (selImages && selImages.length == 1) {
      let output = images.slice();
      output[index] = {
        uri: selImages[0].path, // for FormData to upload
        type: selImages[0].mime,
        name: selImages[0].filename || `${Date.now()}.jpg`,
      };
      console.log('ImagePicker.openPicker: output', output);
      onChange(output);
    } else {
      const output = selImages.map((image) => ({
        uri: image.path,
        type: image.mime,
        name: image.filename || `${Date.now()}.jpg`,
      }));
      onChange(output);
      console.log('ImagePicker.openPicker: output', output);
    }
  })
  .catch((e) => console.error('Image Group: ', e));

【讨论】：

【解决方案3】：

假设您的后端服务器接受file 作为图像参数并且您尝试将多个图像上传到服务器和服务器上，实现了多图像处理并且您使用axios 进行API 处理，你可以这样做：

const images = await ImageCropPicker.openPicker({
    mediaType: 'photo',
    compressImageQuality: 0.4
});

const data = new FormData();
images.forEach((image, index) => {
    data.append(`file[${index}]`, {
        uri: Platform.OS === 'ios' ? `file:///${image.path}` : image.path,
        type: 'image/jpeg',
        name: 'image.jpg'
    });
});

axios({
    url: 'imageUploadUrl',
    method: 'POST',
    data,
    headers: { 'Content-Type': 'multipart/form-data' }
}).then((response) => {
    console.log('image upload response: ', response)
}).catch((error) => {
    console.log('image upload error: ', error)
});

请不要忘记将 imageUploadUrl 替换为您的服务器 API 网址。

【讨论】：