react native android 上传文件，Nodejs服务端获取上传的文件

React Native端

使用react-native-image-picker 做出选择图片的操作，选择完成后，直接将图片Post至服务器，保存在服务器的某个地方（保存图片的路径需要公开显示），并返回图片的URL地址，Android应用中，只保存图片的URL地址。

component中代码

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

            if (response.didCancel) {
                console.log('用户取消了选择！');
            }
            else if (response.error) {
                alert("ImagePicker发生错误：" + response.error);
            }
            else if (response.customButton) {
                alert("自定义按钮点击：" + response.customButton);
            }
            else {
                // let source = { uri: response.uri };
                try {

                    console.log(response);

                    uploadImage(response.uri, response.fileName, this.state.userEntity.token).then((imageUrl) => {
                        console.log(imageUrl);
                        //http://f11.baidu.com/it/u=3806443343,4236894804&fm=72
                        // You can also display the image using data:
                        let source = { uri: 'data:image/jpeg;base64,' + response.data };
                        let oldselectIssueData = this.state.selectIssueData;
                        oldselectIssueData.IssueImageList.push({ uri: imageUrl });

                        console.log('设置后')
                        this.setState({
                            selectIssueData: oldselectIssueData
                        });

                    }).catch((err) => {
                        throw err;
                    })

                } catch (error) {
                    Alert.alert('选择图片错误', error.message);
                }
            }
        });
    }

公共方法 uploadFile.js

import { default_API_url } from '../config/index';

export function uploadImage(imageUri, imageName, token) {
    return new Promise((resolve, reject) => {
        let data = new FormData()
        if (imageUri) {
            data.append('image', { uri: imageUri, name: imageName, type: 'image/jpg' })//加入图片
        }
        const config = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
                // 'Content-Language': React.NativeModules.RNI18n.locale,
                'Authorization': token,
            },
            body: data,
        }
        fetch(default_API_url + '/fittingImage', config)
            .then(function (response) {
                return response.json();
            }).then((responseData) => {
                console.log('responseData', responseData);
                if (responseData.resultType == 'SUCCESS') {
                    return resolve(default_API_url + '/' + responseData.results.imageName);//返回的是文件名，这里将它加入服务器的名称
                } else {
                    return reject(responseData.resultMsg || 'Unknow Error');
                }
            }).catch((error) => {
                return reject(error);
            });
    });
}

export default uploadImage;

---

Nodejs端，后端使用multer作为上传文件中间件，参考地址：http://cnodejs.org/topic/564f32631986c7df7e92b0db和https://dzone.com/articles/upload-files-or-images-to-server-using-nodejs

service.js中，增加

app.use(express.static(config.fittingImagePath));//公开某个文件夹

router中的方法：

exports.UploadFittingImage = (req, res) => {
    try {

        upload(req, res, function (err) {
            if (err) {
                return res.json({ url: err.message })
            }
            logger.info('req.files---------------------', req.files[0].filename)//因为支持的是多文件上传，这里我返回的是第一个文件名
            return res.status(200).json(responseFormat(null, { imageName: req.files[0].filename }));
        });
    }
    catch (error) {
        return res.status(400).json(responseFormat(error, null));
    }
};

公共方法fileUpload.js

import multer from 'multer';
import Config from 'config-lite';
let config = Config(__dirname);

let Storage = multer.diskStorage({
    destination: function (req, file, callback) {//文件保存位置，我这里是配置的
        callback(null, "./" + config.fittingImagePath);
    },
    filename: function (req, file, callback) {//重命名文件
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

let upload = multer({
    storage: Storage
}).array("image", 1); //Field name and max count
//导出对象
module.exports = upload;

整体的流程