如何在 flutter 中上传 file_picker 选择的文件

Question

我需要将附件发送到 file_picker 从 flutter 中选择的电子邮件。 如何发送文件。

Padding(
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: RaisedButton(
            elevation: 0,
            onPressed: () async{
              final result = await FilePicker.platform.pickFiles();
              if(result == null) return;
              final PlatformFile file = result.files.first;
              setState(() {
                qatarId = file.name;
              });
              openFile(file);
            },
            color: Colors.white,
            shape: RoundedRectangleBorder(
              side: BorderSide(
                color: Colors.green,
                width: 1),
              borderRadius: BorderRadius.all(Radius.circular(0),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'Qatar ID',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.normal,
                      color: Colors.green,
                    ),
                  ),
                  Icon(
                    Icons.upload_sharp,
                    color: Colors.green,
                  )
                ],
              ),
            ),
          ),
        ),

我如何定义上传图像。 图像取自 file_picker。

Answer 1

使用dio library 强大的 Dart Http 客户端，支持拦截器、全局配置、FormData、请求取消、文件下载、超时等。

          FilePickerResult? result = await FilePicker.platform.pickFiles(
                      type: FileType.custom,
                      allowedExtensions: ['jpg', 'pdf', 'doc', 'png', 'mp4', 'mkv'],
                    );
                    if (result != null) {
                      PlatformFile file = result.files.first;
                
                      print(file.name);
                      print(file.bytes);
                      print(file.size);
                      print(file.extension);
                      print(file.path);
                 var multipartFile = await MultipartFile.fromFile(file.path,
                       );
                    FormData formData = FormData.fromMap({
                
                
                
                      "MediaFile": multipartFile,  //define your json data here
                    });
            
            
             functionToUploadToServer(formData); //call upload function passing multiform data
                }
    }
            
            
            
            
                functionToUploadToServer(multiformData){  
                    
                      Dio dio = Dio();
                
                      final response = await dio.post(
                        url,
                        data: multiformData,
                        options: Options(
                            contentType: 'multipart/form-data',
                            headers: {},
                            followRedirects: false,
                            validateStatus: (status) {
                              return status! <= 500;
                            }),
                      );
                      print(response.statusCode);
                     
                }


 

Answer 2

这个 _upload() 函数需要一个选择的图像列表，带有标题的 api url，然后它将图像列表上传到服务器。

void _upload(List<XFile> files) async {
 for (var file in files) {
  String fname = filename;
  FormData data = FormData.fromMap({
   "file": await MultipartFile.fromFile(
     file.path,
     filename: fname,
    ),
  });

  Dio dio = new Dio();
 
  print('Image File Name: $fname');
  var response = await dio.put(url,
    data: data,
    options: Options(
      headers: {},
    ),
  );

  print(response.statusCode);
  print(response.data);
 }
}