使用node.js将图片从flutter上传到服务器

Question

我制作了一个flutter应用程序，它将打开相机并捕捉图像。我想做的是使用http post服务将该图像发送到后端。我已经使用nodejs创建了一个api，我面临的问题是我不知道如何将图像发送到后端。。。。请帮助

这是我的代码，你能检查一下哪里出了问题吗？因为node.js部分在用poster测试时运行良好。我想这与前端有关。

Flutter前端代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';
class LandingScreen extends StatefulWidget {
@override
_LandingScreenState createState() => _LandingScreenState();
}
class _LandingScreenState extends State<LandingScreen> {
PickedFile imageFile;
Dio dio = new Dio();
_openCamera(BuildContext context) async {
//holds the image taken by the camera
var picture = await ImagePicker().getImage(source: ImageSource.camera);
if (picture != null) {
this.setState(() {
imageFile = picture;
});
}
try {
//Extracting the file name from the file
String filename = imageFile.path.split('/').last;
FormData formData = new FormData.fromMap({
"image": await MultipartFile.fromFile(imageFile.path,
filename: filename, contentType: new MediaType('image', 'png')),
"type": "image/png"
});
//sending to the server
Response response = await dio.post("http://localhost:3000/tea/",
data: formData,
options: Options(headers: {
"accept": "*/*",
"Authorization": "Bearer accesstoken",
"Content-Type": "multipart/form-data"
}));
} catch (e) {
print(e);
}
}
Widget _decideImageView() {
if (imageFile == null) {
return Text("No selected Image");
} else {
return Image.file(File(imageFile.path), width: 500, height: 400);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.indigo[900],
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
_decideImageView(),
SizedBox(
height: 300,
width: 420,
child: RaisedButton.icon(
onPressed: () {
_openCamera(context);
// _showChoiceDialog(context);
},
label: Text(
'OPEN CAMERA',
style: TextStyle(color: Colors.white, fontSize: 20),
),
icon: Icon(
Icons.camera_alt_outlined,
color: Colors.white,
size: 200,
),
color: Colors.deepOrange,
),
),
],
),
),
),
);
}
}

server.js文件

//import mongoose
const mongoose = require('mongoose');

//establish connection to database
const MongoClient = require('mongodb').MongoClient;
const uri = "mongodb+srv://xxxxxxx:<password>@cluster0.s42z9.mongodb.net/myFirstDatabase? 
retryWrites=true&w=majority";
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });
client.connect(err => {
const collection = client.db("test").collection("devices");
// perform actions on the collection object
client.close();
});
const express = require("express");
const routes = require('./routes/image'); // import the routes
const app = express();
app.use(express.json()); // parses incoming requests with JSON payloads
app.use('/', routes); //to use the routes
app.use('/uploads', express.static('./uploads'));
const listener = app.listen(process.env.PORT || 3000, () => {
console.log('App is listening on port ' + listener.address().port)
})

image.js(模型(

const mongoose = require("mongoose"); //import mongoose
// tea schema
const TeaSchema = new mongoose.Schema({
name: {type:String, required:true},
image: String
//description: String,
//keywords: String,
//origin: String,
//brew_time: Number,
//temperature: Number,
//comments: [{ text: String, date: {type:String, default: new Date()} }]
});
const Tea = mongoose.model('Tea', TeaSchema); //convert to model named Tea
module.exports = Tea; //export for controller use

image.js(路由(

const express = require('express'); //import express
// 1.
const router  = express.Router(); 
// 2.
const teaController = require('../controllers/image'); 
// 3.
//router.post('/image', imageController.newImage); 
//router.post('/image2',imageController.newImage2);
router.post('/tea', teaController.uploadImg /*insert this guy*/ , teaController.newTea);
router.get('/tea', teaController.getAllTea);
router.delete('/tea', teaController.deleteAllTea);
router.get('/tea/:name', teaController.getOneTea);
router.post('/tea/:name', teaController.newComment);
router.delete('/tea/:name', teaController.deleteOneTea);
// 4. 
module.exports = router; // export to use in server.js

image.js(控制器(

const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads');
},
filename: function (req, file, cb) {
cb(null, file.originalname);
}
});
const uploadImg = multer({storage: storage}).single('image');
//import tea model
const Tea = require('../models/image');
// newTea function for post image route
const newImage = (req, res, next) => {
res.json({message: "POST new image"}); // dummy function for now
};
const newImage2 = (req, res, next) => {
res.json({message: "POST new image2"}); // dummy function for now
};
//GET '/tea'
const getAllTea = (req, res, next) => {
//check if the tea name already exists in db
//Tea.findOne({name:req.body.name},(data)=>{
//if tea not in db, add it
//if(data===null){
//create a new tea object using the Tea model and req.body
const newTea = new Tea({
name:req.body.name,
image: req.body.image, // placeholder for now
description: req.body.description,
keywords: req.body.keywords,
origin: req.body.origin,
brew_time: req.body.brew_time,
temperature: req.body.temperature,
})
// save this object to database
//newTea.save((err, data)=>{
//    if(err) return res.json({Error: err});
//    return res.json(data);
//})
//if tea is in db, return a message to inform it exists            
//}else{
return res.json(newTea);
//}
//})    
};
//POST '/tea'
const newTea = (req, res, next) => {
//check if the tea name already exists in db
Tea.findOne({name:req.body.name},(data)=>{
//if tea not in db, add it
if(data===null){
console.log("new object is creating");
//create a new tea object using the Tea model and req.body
const newTea = new Tea({
name:req.body.name,
image: req.file.path // placeholder for now
//description: req.body.description,
//keywords: req.body.keywords,
//origin: req.body.origin,
//brew_time: req.body.brew_time,
//temperature: req.body.temperature,
})
// save this object to database
newTea.save((err, data)=>{
if(err) return res.json({Error: err});
console.log("saved");
return res.json(data);

})
//if tea is in db, return a message to inform it exists            
}else{
console.log("not saved");
return res.json(newTea);

}
}) 
}
//DELETE '/tea'
const deleteAllTea = (req, res, next) => {
res.json({message: "DELETE all tea"});
};
//GET '/tea/:name'
const getOneTea = (req, res, next) => {
res.json({message: "GET 1 tea"});
};
//POST '/tea/:name'
const newComment = (req, res, next) => {
res.json({message: "POST 1 tea comment"});
};
//DELETE '/tea/:name'
const deleteOneTea = (req, res, next) => {
res.json({message: "DELETE 1 tea"});
};

module.exports = {newImage,newImage2,getAllTea, 
newTea,
deleteAllTea,
getOneTea,
newComment,
deleteOneTea,uploadImg};

Answer 1

我只能提供关于Flutter方面的见解。使用image_picker设置要上传的文件，使用dio设置实际上传的方式似乎很好。你想在这里做的是在上传后检查服务器的响应。用debugPrint('Response: $response');打印response，看看是否出现任何错误。