Question

我正在尝试使用此代码在Dart上传文件

阅读文件

    dom.InputElement uploadInput = dom.querySelector('#upload');

    uploadInput.onChange.listen((dom.Event e) 
    {
        // read file content as dataURL
        final files = uploadInput.files;

        if (files.length == 1) 
        {
            final file = files[0];
            final reader = new dom.FileReader();

            reader.onLoad.listen((_) 
            {
                dataRequest('upload', reader.result);
            });

            reader.readAsDataUrl (file);
        }
    });

发送文件

    Future<dom.HttpRequest> dataRequest (String path, dynamic data)
    {
        return dom.HttpRequest.request (path, method: "POST", 
               sendData: data);
    }

但是我收到了这个错误

POST http://localhost:9090/upload 400 (Bad Request) :9090/upload:1
Instance of '_XMLHttpRequestProgressEvent'

STACKTRACE:
null

我在Redstone中收到这样的

@app.Route("/upload", methods: const [app.POST], allowMultipartRequest: true)
@Encode()
upload(@app.Body(app.FORM) Map form) 
{
    var file = form["file"];
    print(file.filename);
    print(file.contentType);
    print(file.runtimeType);

    return new Resp()
        ..success = (file.filename != null);
}

有什么想法吗？

Answer 1

飞镖：1.9.1
雷石东：0.5.21

让我们说你有以下html：

<!DOCTYPE html>

<html>
  <head>
    <title>send_file.html</title>
  </head>

  <body>   
    <form id="read">
      user: <input type="text" name='user' value='DefaultValue'>
      <input type="file" id="file" name="my_file"/> <br>

      <input type="button" id="whole_btn" value="Send whole form!"> &nbsp;&nbsp;&nbsp;
      <input type="button" id="specific_btn" value="Send specific values!">
    </form>

    <script type="application/dart" src="send_file.dart"></script>
  </body>
</html>

Redstone服务器文件：

import 'dart:io';
import 'package:logging/logging.dart';
import 'package:redstone/server.dart' as app;
import 'package:shelf_static/shelf_static.dart';

@app.ErrorHandler(HttpStatus.NOT_FOUND)
handleNotFoundError() => app.redirect("not_found.html");

@app.Route('/post',methods: const [app.POST], allowMultipartRequest: true)
wholeFormPost(@app.Body(app.FORM) Map form) {
  var user = form['user'];
  var f = form['my_file'];
  print('user: $user \n file: \n ${f.content}');
}

@app.Route('/post1',methods: const [app.POST], allowMultipartRequest: true)
specificPost(@app.Body(app.FORM) Map form) {
  var specificField = form['specificField'];
  var f = form['my_file'];
  print('specificField: $specificField \n file: \n ${f.content}');
}

@app.Interceptor(r'/.*')
interceptor1() {
  if (app.request.method == 'OPTIONS') {
    app.response = app.response.change(headers: CORS);
    app.chain.interrupt();
  } else {
    app.chain.next(() {
      return app.response = app.response.change(headers: CORS );
    });
  }
}

Map CORS = {
  "Access-Control-Allow-Origin" : "*, ",
  "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
  "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Content-Disposition"
};

main() {
  app.setShelfHandler(createStaticHandler("/home/raz2/dartProjects_linux_1/PR5/cl2/lib",
                                          defaultDocument: 'send_file.html',
                                            serveFilesOutsidePath: true));

  app.setupConsoleLog(Level.ALL);
  app.start(address: "0.0.0.0", port: 8081);
}

客户端dart文件：send_file.dart

import 'dart:html';

class UploadFileEx {
  FormElement _readForm;
  InputElement _fileInput;
  File file;
  ButtonElement _wholeBtn;
  ButtonElement _specificBtn;

  UploadFileEx() {
    _readForm = document.querySelector('#read');
    _fileInput = 
        document.querySelector('#file')
        ..onChange.listen(_onFileInputChange);

    _wholeBtn = 
        document.querySelector('#whole_btn')
        ..onClick.listen((sendForm));

    _specificBtn = 
        document.querySelector('#specific_btn')
        ..onClick.listen((sendFileAndField));
  }

  _onFileInputChange(_) {
    file = _fileInput.files[0];
  }

  // Send the whole form
  void sendForm(_) {
    if(file == null) 
      return;

    FormData fd = new FormData(_readForm);

    HttpRequest req = new HttpRequest();
    req.open("POST", 'http://127.0.0.1:8081/post');
    req.send(fd);
  }

  // add my own field to FormData
  void sendFileAndField(_) {
    if(file == null) 
      return;

    FormData fd = new FormData();
    fd.append('specificField', 'Lalala');
    fd.appendBlob('my_file', file);

    HttpRequest req = new HttpRequest();
    req.open("POST",'http://127.0.0.1:8081/post1');
    req.send(fd);
  }

}

void main() {
  new UploadFileEx();
}

应该有效。有关详细信息，请查看此链接：Sending_forms_through_JavaScript

将Dart中的文件上载到Redstone Server时出错

1 个答案: