Flutter上传文件到服务器

好久没写了，一直没时间，项目太紧，而且自己也变懒了许多。现在就发一下自己简简单单的封装类吧，一个上传服务器的一个封装。因为很多人问我在选择之后在选择无法去保存上次选择的文件。其实我也没多说什么。就说了一个set去重。在这里我就把我最简单的一个封装拿来用。这里我用的是一个multi_image_picker这个插件。我也不多说什么了直接上代码了。只要copy下来修改一下自己的网络配置就能使用。

import 'dart:io';

import 'package:---------/pages/login_pages/bloc/uoload_image/upload_repository.dart';
import 'package:---------/utils/file_util.dart';
import 'package:---------/utils/toast_util.dart';
import 'package:flutter/';
import 'package:flutter/';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:multi_image_picker/multi_image_picker.dart';

/*
* 重新封装图片多选
* 使用直接可以看定义的参数
* */
class WrapMultiImagePicker extends StatefulWidget {
  final int maxChoose; //图片最大的选择个数
  final Function(List<dynamic> list) callback; //上传服务器接口的回调
  final Function(List<dynamic> list) deleteCallback; //删除照片后的回调

  const WrapMultiImagePicker(
      {Key key,
          = 9,
        @required ,
        @required ,
      })
      : super(key: key);

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

class _WrapMultiImagePickerState extends State<WrapMultiImagePicker> {
  List<Asset> images = List<Asset>();
  List<dynamic> imagesUrlData = [];
  bool error = false;
  GlobalKey _key = new GlobalKey();

  Future<void> loadAssets() async {
    List<Asset> resultList = List<Asset>();

    try {
      resultList = await (
        maxImages: ,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "选择图片",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {
      if (mounted) {
        setState(() {
          error = true;
        });
      }
    }
    if (!mounted) return;

    setState(() {
      Set<Asset> showImages = new Set();
      for (var item in resultList) {
        (item);
      }
      images = [];
      for (var item in showImages) {
        (item);
      }

      _uploadClient();
    });
  }

  // 上传服务器
  void _uploadClient() async {
    List<String> _imagesUrlList = [];
    for (int i = 0; i < ; i++) {
      ByteData byteData =
          await images[i].getByteData(quality: 10); //quality这是一个压缩的比例
      String prePath =
          await ().getSavePath("/updateImage/");
      String name = ().() + ".png";
      File _imageFile = await File(prePath + name)
          .writeAsBytes(.asUint8List());
      if (_imageFile != null) {
        _imagesUrlList.add(_imageFile.path);
      }
    }
    final res = await (
        imagesUrlList: _imagesUrlList);

    if (res["code"] == 0) {
      if ( != null) {
        imagesUrlData = res["data"];
        (imagesUrlData);
      }
    } else {
      (msg: "上传服务器失败，请重新操作");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: (horizontal: ),
      child: Container(
        width: ,
        child: Wrap(
          spacing: ,
          runSpacing: ,
          children: _showImageWrap(),
        ),
      ),
    );
  }

  List<Widget> _showImageWrap(){
    List<Widget> tempList = [];
    for (int i = 0; i < ; i++) {
      Asset asset = images[i];
      (Container(
        width: 100,
        height: 100,
        child: Stack(
          children: <Widget>[
            ClipRRect(
              borderRadius: (5),
              child: AssetThumb(
                asset: asset,
                width: 100,
                height: 100, //这里的宽高似乎不影响显示的大小
              ),
            ),
            Positioned(
              right: 3,
              top: 3,
              child: InkWell(
                  onTap: (){
                    print("index::::$i");
                    (i);
                    (i);
                    if( != null){
                      (imagesUrlData);
                    }
                    if(mounted){
                      setState(() {

                      });
                    }
                  },
                  child: Icon(,size: ,)),
            ),
          ],
        ),
      ));
    }

    if ( < ) {
      (InkWell(
        onTap: loadAssets,
        child: Container(
          key: _key,
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: (5),
            color: Color(0xffa0a8ac),
          ),
          child: Column(
            mainAxisAlignment: ,
            children: <Widget>[
              Icon(
                ,
                size: 32,
                color: ,
              ),
              SizedBox(
                height: ,
              ),
              Text(
                "请上传图片",
                style: TextStyle(fontSize: , color: Color(0xff333333)),
              ),
            ],
          ),
        ),
      ));
    }

    return tempList;
  }
}

import 'dart:io';

import 'package:----------/network_manage/http_utils/';
import 'package:dio/';
import 'package:flutter/';

class UploadRepository{
  static const _aliyunClientUrl = "你的服务器的地址";

  static Future<Map<String,dynamic>> upMultiFileLoadClient({@required List<String> imagesUrlList}) async {
    List<MultipartFile> _files = [];
    for(var i =0;i < ;i++){
      final MultipartFile _file = (imagesUrlList[i]);
      if(_file != null){
        _files.add(_file);
      }
    }
    Map<String,dynamic> response = await HttpUtil().postUpload(
        _aliyunClientUrl,
        formData: ({
          "files": _files
        }),
        options: Options(
          receiveTimeout: 200000,
            sendTimeout: 200000,
            headers: {  //上传服务器的头信息
          "Content-Type": "multipart/form-data",
        }
        ),
        progressCallback: (int count, int total){
          print("进度::::${(count * 100 / total).toStringAsFixed(2)}%");
        }
    );
    print("上传阿里云::::$response");
    if(response["code"] != 0){
      throw Exception(response["msg"] ?? "上传服务器失败");
    }

    return response;
  }
}

由于我这里是先显示的本地然后去用服务器的数据同步自己的操作，这里需要你们自己的服务器是好的。如果上传失败是出现选择后消失的问题，这是因为服务器没上传上去的原因。只要保证接口没问题，这个可以直接拿下来就能用