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;

 

 

 总体的流程