解决错误或提供一个完整的工作示例,使用Dio将具有多图像选择器的图像作为List <file>上传

问题描述

我试图上传图片已有几天,但无法正常工作,因此,如果您有有效的代码,请把它作为答案或只是解决代码

这是代码

import 'dart:typed_data';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:mazadi/Models/ImageUpload.dart';
import 'package:multi_image_picker/multi_image_picker.dart';

class AddAd3 extends StatefulWidget {
  AddAd3({
    Key key,}) : super(key: key);

  @override
  _AddAd3State createState() => _AddAd3State();
}

class _AddAd3State extends State<AddAd3> {
  bool _isUploading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.all(12.0),child: ListView(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
              SizedBox(
                width: 100,height: 100,child: RaisedButton(
                  onPressed: () {
                    getImage();
                  },color: Colors.white,shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(7.0)),child: SizedBox(
                    width: 90,height: 90,child: Center(
                      child: Icon(
                        Icons.add,color: Colors.deepOrange,size: 30.0,),],SizedBox(
            height: 40,SizedBox(
            width: 500,height: 500,child: _isUploading == true
                ? FutureBuilder(
                    future: uploadImage(),builder: (BuildContext context,AsyncSnapshot snapshot) {
                      switch (snapshot.connectionState) {
                        case ConnectionState.none:
                        case ConnectionState.waiting:
                          return new Text('loading...');
                        default:
                          if (snapshot.hasError)
                            return new Text('${snapshot.error}');
                          else
                            return createListView(context,snapshot);
                      }
                    },)
                : Text(""),));
  }

  Future getImage() async {
    files.clear();

    List<Asset> resultList = List<Asset>();
    resultList = await MultiImagePicker.pickImages(
      maxImages: 10,enableCamera: false,);

    for (var asset in resultList) {
      int MAX_WIDTH = 500; //keep ratio
      int height = ((500 * asset.originalHeight) / asset.originalWidth).round();

      ByteData byteData =
          await asset.getThumbByteData(MAX_WIDTH,height,quality: 80);

      if (byteData != null) {
        List<int> imageData = byteData.buffer.asUint8List();
        MultipartFile u = MultipartFile.fromBytes(
          imageData,filename: asset.name,);
        files.add(u);
      }
    }

    setState(() {
      _isUploading = true;
    });
  }

  List<MultipartFile> files = new List<MultipartFile>();
  Future<List<String>> uploadImage() async {
    FormData formData = new FormData.fromMap({"thumb": files});

    Dio dio = new Dio();
    var response = await dio.post(
        "https://mazadyy.com/index.php?route=api/customer_product/uploadImages",data: formData);

    UploadImage image = UploadImage.fromJson(response.data);
    return image.images;
  }

  Widget createListView(BuildContext context,AsyncSnapshot snapshot) {
    if (snapshot.hasError) {
      return Text("error createListView");
    }

    if (!snapshot.hasData) {
      return Text("");
    }

    List<String> values = snapshot.data;

    return new ListView.builder(
      shrinkWrap: true,itemCount: values.length,itemBuilder: (BuildContext context,int index) {
        return new Column(
          children: <Widget>[
            Image.network(
              values[index],width: 300,SizedBox(
              height: 40,);
      },);
  }
}

这里是模型

class UploadImage {
  List<String> images;

  UploadImage({this.images});

  factory UploadImage.fromJson(Map<String,dynamic> json) {
    return UploadImage(images: parseImage(json['images']));
  }

  static List<String> parseImage(json) {
    return new List<String>.from(json);
  }
}
 

我得到的例外是

类型字符串不是“地图”的子类型

因此,如果您解决了该错误,我将非常感谢并给予他 50个声誉作为奖励,因为 我看到许多人为同样的问题而奋斗

任何帮助将不胜感激

解决方法

if (images.isEmpty || images[0] != null) {
                    for (int i = 0; i < images.length; i++) {
                      ByteData byteData = await images[i].getByteData();
                      List<int> imageData = byteData.buffer.asUint8List();
                      http.MultipartFile multipartFile =
                          http.MultipartFile.fromBytes('image',imageData,filename: images[i].name,contentType: MediaType('image','jpg'));
                      imagestoEdit.add(multipartFile);
                      print(imagestoEdit.length);
                    }
                  }
Dio.post(url,formdata:{images:imagestoEdit})

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...