flutter:用dio实现文件上传

一,安装第三方库:

地址:

https://pub.dev/packages/dio

编辑pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.5
  audioplayers: ^6.4.0
  flutter_sound: ^9.26.0
  permission_handler: ^11.4.0
  file_picker: ^9.2.1
  http: ^1.3.0
  dio: ^5.8.0+1

然后点击 pub get

二,代码:

1,dart代码

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:dio/dio.dart';
//import 'package:file_picker/file_picker.dart';

class PickerPage extends StatefulWidget {
  final Map arguments;

  // 为title设置一个默认参数,这样的跳转该界面时可以不传值。
  PickerPage({super.key, required this.arguments});
  @override
  State<PickerPage> createState() => _PickerPageState();
}

class _PickerPageState extends State<PickerPage> {

  //uploadImage
  void uploadFile(String apiUrl,String filePath,String fileName) async {
      FormData formData = FormData.fromMap({
        'name': 'dio',
        'date': DateTime.now().toIso8601String(),
        "file": await MultipartFile.fromFile(filePath, filename: fileName),
      });

      try {
        Response response = await Dio().post(apiUrl, data: formData);
        print("接口响应:");
        print(response.data);
      } catch (e) {
        print(e);
      }
  }

  Future<void> _requestPermission() async {
    var status =  await Permission.storage.status;
    if (!status.isGranted) {
       print("未授权访问存储,开始请求");
       await Permission.storage.request();
    } else {
      print("已授权访问存储");
    }
  }


  Future<List<dynamic>> openFilePicker() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();
    if (result != null) {
      final files = result.files[0];
      print("选中了文件:");
      print(files.path);
      return [files.path, files.name];
    } else {
      //未选择任何文件
      print('未选择文件');
      return ["",""];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(widget.arguments["title"]),
      ),

      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            print("开始请求权限");
            await _requestPermission();
            print("开始选择文件");
            openFilePicker().then((value) {
              String apiUrl = "http://www.testsite.net/up.php";
              //开始上传文件
              uploadFile(apiUrl,value[0],value[1]);
            });


          },
          child: Row(
            mainAxisSize: MainAxisSize.min, // 根据内容调整大小
            children: <Widget>[
              Icon(Icons.add), // 图标在左侧
              SizedBox(width: 10), // 可选:添加一些间隔
              Text("选择文件"), // 文本在右侧
            ],
          ),
        ),
      ),

    );
  }
}

2,服务端php代码:

<?php
var_dump($_POST);
var_dump($_FILES);

foreach($_FILES as $k =>$one) {
	var_dump($one);
	$file = $one["tmp_name"];
	$ext = pathinfo($one["name"], PATHINFO_EXTENSION);
	$dest = "/data/work/tmp/".rand(1000,9999).".".$ext;
	  if(move_uploaded_file($file, $dest)){
                echo 'success';
      }
      else{
                echo 'error';
      }
}

?>

 

三,测试效果:

打印信息:

I/flutter ( 8612): 选中了文件:
I/flutter ( 8612): /data/user/0/com.example.demo3/cache/file_picker/1742881934844/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto.webp
I/flutter ( 8612): array(2) {
I/flutter ( 8612):   ["name"]=>
I/flutter ( 8612):   string(3) "dio"
I/flutter ( 8612):   ["date"]=>
I/flutter ( 8612):   string(26) "2025-03-25T13:52:15.121550"
I/flutter ( 8612): }
I/flutter ( 8612): array(1) {
I/flutter ( 8612):   ["file"]=>
I/flutter ( 8612):   array(5) {
I/flutter ( 8612):     ["name"]=>
I/flutter ( 8612):     string(60) "u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto.webp"
I/flutter ( 8612):     ["type"]=>
I/flutter ( 8612):     string(24) "application/octet-stream"
I/flutter ( 8612):     ["tmp_name"]=>
I/flutter ( 8612):     string(14) "/tmp/phpMyb8E7"
I/flutter ( 8612):     ["error"]=>
I/flutter ( 8612):     int(0)
I/flutter ( 8612):     ["size"]=>
I/flutter ( 8612):     int(89620)
I/flutter ( 8612):   }
I/flutter ( 8612): }
I/flutter ( 8612): array(5) {
I/flutter ( 8612):   ["name"]=>
I/flutter ( 8612):   string(60) "u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto.webp"
I/flutter ( 8612):   ["type"]=>
I/flutter ( 8612):   string(24) "application/octet-stream"
I/flutter ( 8612):   ["tmp_name"]=>
I/flutter ( 8612):   string(14) "/tmp/phpMyb8E7"
I/flutter ( 8612):   ["error"]=>
I/flutter ( 8612):   int(0)
I/flutter ( 8612):   ["size"]=>
I/flutter ( 8612):   int(89620)
I/flutter ( 8612): }
I/flutter ( 8612): success

 

posted @ 2025-03-29 09:02  刘宏缔的架构森林  阅读(282)  评论(0)    收藏  举报