在Flutter Web中上传多个文件(图像)

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3 # 用于发送HTTP请求

import 'dart:html' as html; // For web-specific APIs
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class FileUploadWidget extends StatefulWidget {
  @override
  _FileUploadWidgetState createState() => _FileUploadWidgetState();
}

class _FileUploadWidgetState extends State<FileUploadWidget> {
  List<html.File> _files = [];

  void _onFileSelect(html.Event event) {
    final input = event.target as html.InputElement;
    final files = input.files;
    for (var i = 0; i < files.length; i++) {
      setState(() {
        _files.add(files[i]);
      });
    }
  }

  Future<void> _uploadFiles() async {
    for (var file in _files) {
      final url = 'YOUR_UPLOAD_ENDPOINT'; // 替换为你的上传URL
      final request = http.MultipartRequest('POST', Uri.parse(url));
      request.files.add(await http.MultipartFile.fromPath('file', file.name, file.type));

      final response = await request.send();
      if (response.statusCode == 200) {
        print('File uploaded successfully');
      } else {
        print('Failed to upload file');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        html.InputElement(type: 'file', multiple: true, onInput: _onFileSelect),
        ElevatedButton(
          onPressed: _files.isEmpty ? null : _uploadFiles,
          child: Text('Upload Files'),
        ),
      ],
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('File Upload Example')),
        body: Center(child: FileUploadWidget()),
      ),
    );
  }
}