Flutter web：如何上传大文件？

问题描述 投票：0回答：2

有办法上传大文件到服务器吗？

我将 

MultipartRequest
与 
MultipartFile
一起使用，例如：

  List<int> fileBytes) async {
  var request = new http.MultipartRequest("POST", Uri.parse(url));
  request.files.add(http.MultipartFile.fromBytes(
    'file',
    fileBytes,
    contentType: MediaType('application', 'octet-stream'),
    filename: fileName));
  request.headers.addAll(headers);
  var streamedResponse = await request.send();
  return await http.Response.fromStream(streamedResponse);

并读取文件，如下所示：

    html.InputElement uploadInput = html.FileUploadInputElement();
    uploadInput.multiple = false;
    uploadInput.draggable = true;
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      final files = uploadInput.files;
      final file = files[0];

      final reader = new html.FileReader();

      reader.onLoadEnd.listen((e) {
        setState(() {
          _bytesData =
              Base64Decoder().convert(reader.result.toString().split(",").last);
          _selectedFile = _bytesData;
        });
      });

      reader.readAsDataUrl(file);
    });

对于 30 MB 左右的文件来说还可以，但对于超过这个大小的文件，我会得到 

Error code: Out of Memory
。

我做错了什么吗？我在哪里看到过

MultipartFile.fromBytes 会给你带来一些关于较大文件的问题，因为浏览器会限制你的内存消耗。

我认为他的解决方案是：

有一个 fromStream 构造函数。通常，对于更大的文件，我只使用 HttpRequest，并将 File 对象放入 FormData 实例中。

我使用了 

MultipartFile
和 
MultipartFile.fromString
，两次（对于 150 MB 文件）都再次发生了。 我该如何使用这个解决方案？或者对于超过 500 MB 的文件是否有更好的方法？

更新

使用 

Worker
添加了答案。这不是一个很好的解决方案，但我认为这可能会对某人有所帮助。

flutter file-upload out-of-memory large-files flutter-web
2个回答
4
投票

更新

这里有一个项目，展示如何使用带有进度指示器的解决方案来完成此任务。 目前，我解决了这个问题：

进口：

import 'package:universal_html/html.dart' as html; 

颤振部分：

class Upload extends StatefulWidget { @override _UploadState createState() => _UploadState(); } class _UploadState extends State<Upload> { html.Worker myWorker; html.File file; _uploadFile() async { String _uri = "/upload"; myWorker.postMessage({"file": file, "uri": _uri}); } _selectFile() { html.InputElement uploadInput = html.FileUploadInputElement(); uploadInput.multiple = false; uploadInput.click(); uploadInput.onChange.listen((e) { file = uploadInput.files.first; }); } @override void initState() { myWorker = new html.Worker('upload_worker.js'); myWorker.onMessage.listen((e) { setState(() { //progressbar,... }); }); super.initState(); } @override Widget build(BuildContext context) { return Column( children: [ RaisedButton( onPressed: _selectFile(), child: Text("Select File"), ), RaisedButton( onPressed: _uploadFile(), child: Text("Upload"), ), ], ); } } 

Javascript部分：

在 Web 文件夹（index.html 旁边）中，创建文件“upload_worker.js”。

self.addEventListener('message', async (event) => { var file = event.data.file; var url = event.data.uri; uploadFile(file, url); }); function uploadFile(file, url) { var xhr = new XMLHttpRequest(); var formdata = new FormData(); var uploadPercent; formdata.append('file', file); xhr.upload.addEventListener('progress', function (e) { //Use this if you want to have a progress bar if (e.lengthComputable) { uploadPercent = Math.floor((e.loaded / e.total) * 100); postMessage(uploadPercent); } }, false); xhr.onreadystatechange = function () { if (xhr.readyState == XMLHttpRequest.DONE) { postMessage("done"); } } xhr.onerror = function () { // only triggers if the request couldn't be made at all postMessage("Request failed"); }; xhr.open('POST', url, true); xhr.send(formdata); } 




      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        
https://pub.dev/packages/chunked_uploader

你必须获得一个流，这可以通过 file_picker 或 drop_zone 库来实现。我使用了 drop_zone 库，因为它提供了文件选择器和放置区域功能。在我的代码中，
dynamic file
对象来自 drop_zone 库。
也许您必须根据您的后端调整块上传器功能。我使用 django 后端编写了一个保存文件的简单视图。在小文件的情况下，它可以接收具有多个文件的多部分请求，在大文件的情况下，它可以接收块并在收到前一个块的情况下继续写入文件。
这是我的代码的一些部分：


Python 后端：


@api_view(["POST"])
def upload(request):
    basePath = config.get("BasePath")
    
    targetFolder = os.path.join(basePath, request.data["taskId"], "input")
    if not os.path.exists(targetFolder):
        os.makedirs(targetFolder)

    for count, file in enumerate(request.FILES.getlist("Your parameter name on server side")):
        path = os.path.join(targetFolder, file.name)
        print(path)
        with open(path, 'ab') as destination:
            for chunk in file.chunks():
                destination.write(chunk)

    return HttpResponse("File(s) uploaded!")



我的版本中的 flutter 块上传器：


import 'dart:async';
import 'dart:html';
import 'dart:math';
import 'package:dio/dio.dart';
import 'package:flutter_dropzone/flutter_dropzone.dart';
import 'package:http/http.dart' as http;

class UploadRequest {
  final Dio dio;
  final String url;
  final String method;
  final String fileKey;
  final Map<String, String>? bodyData;
  final Map<String, String>? headers;
  final CancelToken? cancelToken;
  final dynamic file;
  final Function(double)? onUploadProgress;
  late final int _maxChunkSize;
  int fileSize;
  String fileName;
  late DropzoneViewController controller;

  UploadRequest(
    this.dio, {
    required this.url,
    this.method = "POST",
    this.fileKey = "file",
    this.bodyData = const {},
    this.cancelToken,
    required this.file,
    this.onUploadProgress,
    int maxChunkSize = 1024 * 1024 * 99,
    required this.controller,
    required this.fileSize,
    required this.fileName,
    this.headers
  }) {
    _maxChunkSize = min(fileSize, maxChunkSize);
  }

  Future<Response?> upload() async {
    Response? finalResponse;
    for (int i = 0; i < _chunksCount; i++) {
      final start = _getChunkStart(i);
      print("start is $start");
      final end = _getChunkEnd(i);
      final chunkStream = _getChunkStream(start, end);
      
      
      var request = http.MultipartRequest(
        "POST",
        Uri.parse(url),
      );

      //request.headers.addAll(_getHeaders(start, end));
      request.headers.addAll(headers!);

      //-----add other fields if needed
      request.fields.addAll(bodyData!);

      request.files.add(http.MultipartFile(
        "Your parameter name on server side",
        chunkStream,
        fileSize,
        filename: fileName// + i.toString(),
        )
      );


      //-------Send request
      var resp = await request.send();

      //------Read response
      String result = await resp.stream.bytesToString();

      //-------Your response
      print(result);

      
    }
    return finalResponse;
  }

  Stream<List<int>> _getChunkStream(int start, int end) async* {
    print("reading from $start to $end");
    final reader = FileReader();
    final blob = file.slice(start, end);
    reader.readAsArrayBuffer(blob);
    await reader.onLoad.first;
    yield reader.result as List<int>;
  }


  // Updating total upload progress
  _updateProgress(int chunkIndex, int chunkCurrent, int chunkTotal) {
    int totalUploadedSize = (chunkIndex * _maxChunkSize) + chunkCurrent;
    double totalUploadProgress = totalUploadedSize / fileSize;
    this.onUploadProgress?.call(totalUploadProgress);
  }

  // Returning start byte offset of current chunk
  int _getChunkStart(int chunkIndex) => chunkIndex * _maxChunkSize;

  // Returning end byte offset of current chunk
  int _getChunkEnd(int chunkIndex) =>
      min((chunkIndex + 1) * _maxChunkSize, fileSize);

  // Returning a header map object containing Content-Range
  // https://tools.ietf.org/html/rfc7233#section-2
  Map<String, String> _getHeaders(int start, int end) {
    var header = {'Content-Range': 'bytes $start-${end - 1}/$fileSize'};
    if (headers != null) {
      header.addAll(headers!);
    }
    return header;
  }

  // Returning chunks count based on file size and maximum chunk size
  int get _chunksCount {
    var result = (fileSize / _maxChunkSize).ceil();
    return result;
  }
}

    



上传代码决定是在一个请求中上传多个文件还是将一个文件分为多个请求：


//upload the large files

Map<String, String> headers = {
  'Authorization': requester.loginToken!
};

fileUploadView.droppedFiles.sort((a, b) => b.size - a.size);

//calculate the sum of teh files:

double sumInMb = 0;
int divideBy = 1000000;

for (UploadableFile file in fileUploadView.droppedFiles) {
    sumInMb += file.size / divideBy;
}

var dio = Dio();

int uploadedAlready = 0;
for (UploadableFile file in fileUploadView.droppedFiles) {

  if (sumInMb < 99) {
    break;
  }

  var uploadRequest = UploadRequest(
    dio,
    url: requester.backendApi+ "/upload",
    file: file.file,
    controller: fileUploadView.controller!,
    fileSize: file.size,
    fileName: file.name,
    headers: headers,
    bodyData: {
      "taskId": taskId.toString(),
      "user": requester.username!,
    },
  );

  await uploadRequest.upload();

  uploadedAlready++;
  sumInMb -= file.size / divideBy;
}

if (uploadedAlready > 0) {
  fileUploadView.droppedFiles.removeRange(0, uploadedAlready);
}

print("large files uploaded");

// upload the small files

//---Create http package multipart request object
var request = http.MultipartRequest(
  "POST",
  Uri.parse(requester.backendApi+ "/upload"),
);


request.headers.addAll(headers);

//-----add other fields if needed
request.fields["taskId"] = taskId.toString();

print("adding files selected with drop zone");
for (UploadableFile file in fileUploadView.droppedFiles) {

  Stream<List<int>>? stream = fileUploadView.controller?.getFileStream(file.file);

  print("sending " + file.name);

  request.files.add(http.MultipartFile(
      "Your parameter name on server side",
      stream!,
      file.size,
      filename: file.name));
}


//-------Send request
var resp = await request.send();

//------Read response
String result = await resp.stream.bytesToString();

//-------Your response
print(result);



希望这能让您很好地了解我如何解决问题。

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.