Flutter - 如何实现网页和移动端的文件上传？

Question

我正在尝试在我的 flutter 应用程序中实现简单的文件上传功能。我需要在网络和移动设备上都拥有它。

\n

            ///\n        class FileUploadController extends GetxController {\n          Rx<File?> file = Rx<File?>(null);\n          String fileName = '';\n          var token =\n              'something';\n\n          void pickFile() async {\n            try {\n              FilePickerResult? result = await FilePicker.platform.pickFiles(\n                //type: FileType.image,\n                allowMultiple: false,\n              );\n\n              if (result != null) {\n                if (kIsWeb) {\n                  Uint8List? fileBytes = result.files.first.bytes;\n                  fileName = result.files.first.name;\n                  var objFile = await createFileFromBytes(fileBytes);\n                  file.value = objFile;\n                } //\n                else {\n                  file.value = File(result.files.single.path!);\n                }\n              }\n            } //\n            catch (e) {\n              print(e);\n            }\n          }\n\n          Future<File> createFileFromBytes(Uint8List? bytes) async {\n            var cleanString = '';\n            var lstBytes = bytes!.toList();\n            // Decode the bytes as a UTF-8 string\n            String decodedCode = utf8.decode(lstBytes, allowMalformed: true);\n            if (decodedCode.contains('\xef\xbf\xbd')) {\n              cleanString = decodedCode.replaceAll('\xef\xbf\xbd', '');\n            }\n\n            // Create a File object from the decoded string\n            var file = File.fromRawPath(Uint8List.fromList(cleanString.codeUnits));\n            return file;\n          }\n\n          void uploadFile() async {\n            try {\n              if (file.value == null) {\n                return;\n              }\n\n              // Set API endpoint URL\n              Uri uri =\n                  Uri.parse('xxxx');\n\n              // Create multipart request\n              var request = http.MultipartRequest('POST', uri);\n\n              request.fields.addAll({\n                "facility_id": "380",\n                "module_id": "1",\n                "id": "3263",\n              });\n\n              // Add file to request\n              String fieldName = 'files';\n              fileName = kIsWeb ? fileName : file.value!.path.split('/').last;\n              var checkFile = file.value;\n    //// getting error here: Un\n              var bytesData = await file.value!.readAsBytes();\n              request.files.add(http.MultipartFile.fromBytes(\n                fieldName,\n                bytesData,\n                filename: fileName,\n              ));\n\n              // Set headers\n              request.headers.addAll({\n                "Authorization": "Bearer $token",\n                "Content-Type": "multipart/form-data",\n                "Content-Length": file.value!.lengthSync().toString(),\n                "Accept": "*/*",\n              });\n\n              // Send request\n              var response = await request.send();\n\n              // Check response status code\n              if (response.statusCode == 200) {\n                print('File uploaded successfully!');\n              } else {\n                print('Error uploading file.');\n              }\n            } //\n            catch (e) {\n              print(e);\n            }\n          }\n\n          ///\n        }\n

\n

错误：不支持的操作_命名空间

\n

Answer 1

可能不是您正在寻找的答案，但我可以使用share_plus包从我的 flutter 应用程序（网络和移动设备）上传文件。

void uploadFile() async {
  try {
    if (file.value == null) {
      return;
    }
    final box = ctx.findRenderObject() as RenderBox?;
    final appDir = await getApplicationDocumentsDirectory();
    final file = File(appDir.path + "/user_data");
    Share.shareXFiles(
      [XFile(file.path)],
      subject: "user_data",
      sharePositionOrigin: rect ?? box!.localToGlobal(Offset.zero) & box.size,
    );
  } catch (e) {
    print(e);
  }
}