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/material.dart';
import 'package:flutter/services.dart';
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,
         this.maxChoose = 9,
        @required this.callback,
        @required this.deleteCallback,
      })
      : 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 MultiImagePicker.pickImages(
        maxImages: widget.maxChoose,
        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) {
        showImages.add(item);
      }
      images = [];
      for (var item in showImages) {
        images.add(item);
      }

      _uploadClient();
    });
  }

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

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Container(
        width: double.infinity,
        child: Wrap(
          spacing: 10.w,
          runSpacing: 10.h,
          children: _showImageWrap(),
        ),
      ),
    );
  }

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

                      });
                    }
                  },
                  child: Icon(Icons.cancel,size: 20.ssp,)),
            ),
          ],
        ),
      ));
    }

    if (images.length < widget.maxChoose) {
      tempList.add(InkWell(
        onTap: loadAssets,
        child: Container(
          key: _key,
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5),
            color: Color(0xffa0a8ac),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                Icons.add,
                size: 32,
                color: Colors.white,
              ),
              SizedBox(
                height: 5.h,
              ),
              Text(
                "请上传图片",
                style: TextStyle(fontSize: 11.ssp, color: Color(0xff333333)),
              ),
            ],
          ),
        ),
      ));
    }

    return tempList;
  }
}

import 'dart:io';

import 'package:----------/network_manage/http_utils/http.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';

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

  static Future<Map<String,dynamic>> upMultiFileLoadClient({@required List<String> imagesUrlList}) async {
    List<MultipartFile> _files = [];
    for(var i =0;i < imagesUrlList.length;i++){
      final MultipartFile _file = MultipartFile.fromFileSync(imagesUrlList[i]);
      if(_file != null){
        _files.add(_file);
      }
    }
    Map<String,dynamic> response = await HttpUtil().postUpload(
        _aliyunClientUrl,
        formData: FormData.fromMap({
          "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;
  }
}

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