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;

 

 

 總體的流程