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

Question

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

Answer 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);
    }
}

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

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>
...........
}

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