Flutter文件上传和下载

先说说我为了测试文件上传和下载做了哪些前期准备吧，首先我把我的个人域名申请了一张ssl证书（https），然后我自己写了一个文件上传接口(php)。

文件下载

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart'; //这里是一个路劲功能库
import 'package:dio/dio.dart';
class FilePage extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return _FilePage();
  }
}
class _FilePage extends State{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("文件下载"),),
      body: Column(
        children: [
          Builder(builder: (context){
            return FlatButton(
              child: Text("文件下载"),
              onPressed: () async {
                //还好我之前写过服务端代码，不然我根本没有相对路劲的概念
                String _localPath = (await _findLocalPath()) + '/Download';
                Response responce = await Dio().download("https://yujun.store/test.xlsx", _localPath+"/test.xlsx");
                if(responce.statusCode == 200){
                  Scaffold.of(context).showSnackBar(
                    SnackBar(content: Text("下载成功"))
                  );
                }
              },
            );
          })
        ],
      ),
    );
  }
  Future _findLocalPath() async { //这里根据平台获取当前安装目录
    final directory = Theme.of(context).platform == TargetPlatform.android
        ? await getExternalStorageDirectory()
        : await getApplicationDocumentsDirectory();
    return directory.path;
  }
}

我是安卓手机跑的，检验结果就是去查看手机 文件管理>内部存储>Android>data>你的包名>files>Download下面有没有一个test.xlsx(报名根据你的真机调试的APP名称去找)

讲完下载，咱们再来玩上传

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:dio/dio.dart';
import 'dart:convert';
import 'package:cached_network_image/cached_network_image.dart'; //强烈推荐的网络图片组件（加载、失败、成功）三种展示

class FilePickerDemo extends StatefulWidget {
  @override
  _FilePickerDemoState createState() => new _FilePickerDemoState();
}

class _FilePickerDemoState extends State {
  String uploadFile = "";

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('文件选择（上传）例子'),
        ),
        body: new Center(
            child: new Padding(
              padding: const EdgeInsets.only(left: 10.0, right: 10.0),
              child: new SingleChildScrollView(
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    RaisedButton(
                      onPressed: () async {
                        File file = await FilePicker.getFile(type: FileType.CUSTOM,fileExtension: "jpg");
                        setState(() {
                          uploadFile = "0";
                        });
                        var name = file.path.substring(file.path.lastIndexOf("/") + 1, file.path.length);
                        var postData = FormData.fromMap({
                          "thumb": await MultipartFile.fromFile(
                              file.path, filename: name)
                        });
//                          var responce = await Request().getInstance().upload("https://yujun.store/upload.php",postData, (send, total){
                        //                print("$send $total");
//                              });//这里我用的我自己封装的上传方法，print("$send $total");这里是Dio的onSendProgress监听，我发现不怎么好用，就没去研究
                        var responce = await Dio().post("https://yujun.store/upload.php",data:postData,onSendProgress: (int sent, int total) {
                          print("$sent $total"); //send是上传的大小 total是总文件大小
                        },);
                        var uploadData = jsonDecode(responce.toString());
                        setState(() {
                          uploadFile = uploadData['url'];
                        });
                      },
                      child: Text(
                          "添加图片"
                      ),
                    ),
                    Builder(builder: (context){
                      if(uploadFile.isNotEmpty){
                        return Container(
                            width: 300.0,
                            height: 200.0,
                            child: uploadFile == '0'?
                            Center(
                              child: SizedBox(
                                width: 80.0,
                                height: 80.0,
                                child: CircularProgressIndicator(),
                              ),
                            )
                                :
                            CachedNetworkImage(
                              imageUrl: uploadFile,
                              placeholder: (context, url) => Center(
                                child: SizedBox(
                                  width: 80.0,
                                  height: 80.0,
                                  child: CircularProgressIndicator(),
                                ),
                              ),
                              errorWidget: (context, url, error) => Icon(Icons.error),
                            )
                        );
                      }else{
                        return Container();
                      }
                    })
                  ],
                ),
              ),
            )),
      ),
    );
  }
}

你可能会想为什么我要给uploadFile三种值，第一种：没开始上传 第一种：开始上传，第二种：上传成功返回值（或者为错误值），你可能还会想为什么要单独再做一个加载器CircularProgressIndicator，因为一个是上传提示，一个是加载网络图片提示。

好了今天的上传跟下载分享完毕了，踩坑感觉就是好。

依赖库文件（我就不过滤了，反正你们看着取）：

  cupertino_icons: ^0.1.2
  shared_preferences: ^0.5.4+8
  dio: ^3.0.0
  provider : ^3.2.0
  flutter_screenutil: ^1.0.1
  dio_log: 1.3.3
  dynamic_list_view: ^0.1.9
  flutter_downloader: ^1.4.0
  path_provider: ^1.5.0
  permission_handler: ^4.1.0
  file_picker: ^1.4.3+2
  cached_network_image: ^2.0.0