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作为上传文件中间件，参考地址：和
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;
整体的流程
