node.js - 使用 node.js 将图像从颤振上传到服务器

Question

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

这是我的代码，你能检查一下有什么问题吗，因为 node.js 部分在使用邮递员测试时工作正常。我假设它与前端有关。

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};

标签： node.jsapifluttermultipartdio