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;

 

 

 整體的流程