无法在颤动中使用 dio 将图像上传到 api

Posted 2023-02-23

【中文标题】无法在颤动中使用 dio 将图像上传到 api

【英文标题】：cannot upload image to api using dio in flutter

【发布时间】：2020-10-29 04:50:50

【问题描述】：

我已经使用此代码从手机图库中选择图像，然后使用api将其上传到服务器，与其他数据一起，一切正常，所有数据都成功上传除了图像，我不知道是什么问题，特别是使用 Postman 时甚至成功上传的图像......这是我在颤动方面的代码：

TextEditingController  namec = TextEditingController();
  TextEditingController  descc = TextEditingController();
  TextEditingController  pricec = TextEditingController();
   File image;
   String imgUrl;


   getImage() async
     var imageIns =  await ImagePicker().getImage(source: ImageSource.gallery);
     setState(() 
       image = File(imageIns.path);
       imgUrl = imageIns.path;
     );
   
   /////////////////////
  uploadImage() async 
    Dio dio = new Dio();
    FormData formData = new FormData.fromMap(
      "name" : namec.text,
      "file" : image,
      "desc" : descc.text,
      "price" : pricec.text,
      "cat" : widget.cid
    );
    var res = await dio.post(
        "http://192.168.43.106:3000/service", data: formData);
    final data = json.decode(res.data);

这在 node.js 端 (api) 中用于插入数据，包括图像：

insertServices: async (req, res)=>
   // var path = req.file.path.replace(/\\/g, '/');
    const result = await new SERVICES(
    name : req.body.name,
    file :  req.file != null ? req.file.path.replace(/\\/g, '/') : "PATH",
    desc : req.body.desc,
    price : req.body.price,
    cat : req.body.cat
    ).save()
    res.json(
        message: "success",
        id : result._id,
        name : result.name,
        file : result.file,
        desc : result.desc,
        price : result.price
    )
    ,

  and i am using (multer) middle ware to upload the image, 

当我尝试通过颤振应用上传图片时，这是服务器端的错误（邮递员没有错误）：

::ffff:192.168.43.1 - - [08/Jul/2020:11:43:28 +0000] "GET /PATH HTTP/1.1" 404 143
(node:15612) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'path' of undefined
    at insertServices (G:\eservices\logic\service.js:67:22)
    at Layer.handle [as handle_request] (G:\eservices\node_modules\express\lib\router\layer.js:95:5)
    at next (G:\eservices\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (G:\eservices\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (G:\eservices\node_modules\express\lib\router\layer.js:95:5)
    at G:\eservices\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (G:\eservices\node_modules\express\lib\router\index.js:335:12)
    at next (G:\eservices\node_modules\express\lib\router\index.js:275:10)
    at Function.handle (G:\eservices\node_modules\express\lib\router\index.js:174:3)
    at router (G:\eservices\node_modules\express\lib\router\index.js:47:12)
    at Layer.handle [as handle_request] (G:\eservices\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (G:\eservices\node_modules\express\lib\router\index.js:317:13)
    at G:\eservices\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (G:\eservices\node_modules\express\lib\router\index.js:335:12)
    at next (G:\eservices\node_modules\express\lib\router\index.js:275:10)
    at compression (G:\eservices\node_modules\compression\index.js:220:5)
(node:15612) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:15612) [DEP0018] DeprecationWa

【参考方案1】：

我有一个类似的应用程序可以从图库中上传图片，这是一个示例：

List<Asset> images = List<Asset>();

我使用multi_image_picker 一次选择多个图像，并在填写images 列表后使用此代码上传它们：

Dio dio = new Dio();
  var items = [];
  for (var item in images) 
  ByteData byteData = await item.getThumbByteData(800, 800);
  List<int> imageData = byteData.buffer.asUint8List();

  MultipartFile i =
  MultipartFile.fromBytes(
    imageData,
    filename: item.name,
  );
  items.add(i);

      
FormData formData = new FormData.fromMap("userfile": items);
Response response = await dio.post(phpEndPoint, data: formData);
if(response.statusCode==200) //success

很遗憾，我不确定后端的代码是什么。