英文:
dart upload file input type file
问题
使用Dart和Golang开发一个小应用程序，并希望将文件上传到服务器。
我在我的.dart文件中找到了类似这样的代码：
InputElement uploadInput = query('file'); // 我的文件输入类型
uploadInput.on.change.add((e) {
// 将文件内容读取为dataURL
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
reader.on.load.add((e) {
sendDatas(reader.result);
});
reader.readAsDataURL(file);
}
});
但是出现了以下错误：
Uncaught TypeError: Cannot read property 'get$on' of null
有什么办法可以解决这个问题吗？
我的目标是使用文件输入类型将文件上传到服务器（文件大小小于1MB）。
英文:
Using Dart and Golang for a small app and looking to upload a file to server.
Found something like this and placed it in my .dart file:
InputElement uploadInput = query('#file'); // my input type file
uploadInput.on.change.add((e) {
// read file content as dataURL
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
reader.on.load.add((e) {
sendDatas(reader.result);
});
reader.readAsDataURL(file);
}
});
but getting the following error:
Uncaught TypeError: Cannot read property 'get$on' of null
any idea how to handle this?
my goal: using input type file upload file to server (file size, < 1MB)
答案1
得分: 1
这个语法在大约一年前发生了变化。
尝试使用以下语法：
<!-- language-all: lang-dart -->
uploadInput.onChange.listen((e) {
同样的变化也需要在这里进行：
reader.onLoad.listen((e) {
xxx.on... 的语法仅适用于自定义事件或浏览器事件，Dart 尚未直接提供相应的获取器。
这对于标准的浏览器事件也适用。你可以像这样使用它：
uploadInput.on['change'].listen((e) => doSomething());
英文:
This syntax has changed about a year ago.
try instead
<!-- language-all: lang-dart -->
uploadInput.onChange.listen((e) {
the same change is necessary here
reader.onLoad.listen((e) {
the xxx.on... syntax is only for custom events or browser events where Dart doesn't yet have direct getters.
This also works for standard browser events. You can use it like
uploadInput.on['change'].listen((e) => doSomething());
答案2
得分: -1
最终更改了代码，这是最终的工作函数，使用DART上传文件：
updatefileToPlay(Event e, dynamic data, FileUploadInputElement el) {
final files = el.files;
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
reader.onLoad.listen((e) {
FormData data = new FormData(); // 来自dart:html
data.append("file", file);
HttpRequest.request('/upload?id=' + message.id, method: 'POST', sendData: data).then((HttpRequest r) {
if (r.readyState == HttpRequest.DONE &&
(r.status == 200 || r.status == 0)) {
window.alert("上传完成");
}
});
});
reader.readAsDataUrl(file);
}
}
请注意，这是一个DART代码示例，用于上传文件。
英文:
Finally changed the code and this is the final working function, uploading file with DART:
updatefileToPlay(Event e, dynamic data, FileUploadInputElement el) {
final files = el.files;
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
reader.onLoad.listen((e) {
FormData data = new FormData(); // from dart:html
data.append("file", file);
HttpRequest.request('/upload?id='+message.id, method: 'POST', sendData: data).then((HttpRequest r) {
if (r.readyState == HttpRequest.DONE &&
(r.status == 200 || r.status == 0)) {
window.alert("upload complete");
}
});
});
reader.readAsDataUrl(file);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论