文档章节

Dart 服务端开发 文件上传

scooplol
 scooplol
发布于 07/20 19:42
字数 322
阅读 12
收藏 0

clent端使用angular组件

upload_component.html

form id="myForm" method="POST" enctype="multipart/form-data">
    <input type="file" name="fileData"> <!-- file field -->
</form>
<span>{{progress}}</span>
<button  (click)="upload()">上传</button>

upload_component.dart

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import "dart:html";
@Component(
  selector: 'upload',
  templateUrl: 'upload_component.html',
  styleUrls: const ['upload_component.css'],
  directives: const [CORE_DIRECTIVES,formDirectives],
)
class UploadComponent{
 //表示文件上传进度
  String progress;

  void upload(){
     // formDate 表示用于存储html文件表单字段的对象    
   var formData = new FormData(querySelector("#myForm"));

   final request = new HttpRequest();
  //使用post方法
   request.open('POST', 'http://localhost:8080/upload');
   //监听文件上传进度
   request.upload.onProgress.listen((ProgressEvent e) {
     progress = (e.loaded*100/e.total).toInt().toString() + '%';
   });
   //监听文件上传完成时调用
   request.onLoad.listen((e) {
     print('Uploaded'+request.response);

   });
   
   request.send(formData);
  }

}

server端

import 'dart:io';

import 'package:mime/mime.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_cors/shelf_cors.dart';
import 'package:shelf_rest/shelf_rest.dart';

void main() {
  var rootRouter = router()..post('/upload',(Request request) async{

  print(request.headers);
  var header = HeaderValue.parse(request.headers['content-type']);
  await for(MimeMultipart part in request.read().transform(new MimeMultipartTransformer(header.parameters['boundary']))) {
  if(part.headers.containsKey('content-disposition')) {
  header = HeaderValue.parse(part.headers['content-disposition']);
  String filename = header.parameters['filename'];
  final file = new File(filename);
  IOSink fileSink = file.openWrite();
  await part.pipe(fileSink);
  fileSink.close();
  }
  }

  return new Response.ok("Success",headers:{'Access-Control-Allow-Origin':'*'});
  });
    //通过此中间件设置跨域标头信息
  final cors = createCorsHeadersMiddleware(
      corsHeaders: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Expose-Headers': 'Authorization, Content-Type',
        'Access-Control-Allow-Headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE'
      }
  );

  var handler = const Pipeline()
      .addMiddleware(logRequests())
      .addMiddleware(cors)  
      .addHandler(rootRouter.handler);

  printRoutes(rootRouter);

  io.serve(handler, 'localhost', 8080).then((server) {
    print('Serving at http://${server.address.host}:${server.port}');
  });
}

 

© 著作权归作者所有

共有 人打赏支持
scooplol
粉丝 12
博文 103
码字总数 205785
作品 0
南充
程序员
Dart 服务端框架--Redstone

Redstone 是一个 Dart 用来开发服务器端应用的元数据驱动微框架。 Redstone.dart 可以让你轻松的通过 Web 接口来发布函数和类,例如: import 'package:redstone/server.dart' as app;@app....

红薯
2015/04/13
1K
0
Flutter 不一样的跨平台解决方案

本文主要介绍Flutter相关的东西,包括Fuchsia、Dart、Flutter特性、安装以及整体架构等内容。 1. 简介 Flutter作为谷歌最近推出的跨平台开发框架,一经推出便吸引了不少注意。关于Flutter,目...

我勒个去
10/01
0
0
Google 宣布重启 Dart 编程语言,应对程序开发挑战

Google 的通用编程语言 Dart 正在重新启动。并推出Dart 2,该语言是针对优化Web和移动的客户端进行开发的。 在移动端,Google的UI框架Flutter使用Dart来简化学习,提高开发人员的速度并拥有高...

周其
02/25
0
13
最火移动端跨平台方案盘点:React Native、weex、Flutter

1、前言 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。 为什么我们需要跨平台开发? ...

JackJiang2011
08/13
0
0
Flutter学习之旅(三)----Flutter常见问题FAQ,看完之后不再是Flutter小白

很多人还不熟悉甚至没听过Flutter,只知道它是用来搞移动端开发的,现在Android和iOS开发已经很成熟了,还有RN(React Native)框架,为什么谷歌还要搞一个Flutter,它能够做什么,究竟比别人好...

飞翔的熊blabla
10/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linuxCool
4分钟前
0
0
SpringBoot内置定时任务

springBoot内置定时任务 应用场景 业务监控,定时发送邮件,定时删除缓存等等。 Spring Boot 内置定时 pom 包配置 <dependencies> <dependency> <groupId>org.springframework.b......

Grittan
8分钟前
1
1
在 Linux 中基于密钥认证的 SSH的配置方法

什么是基于 SSH 密钥的认证? 众所周知,Secure Shell,又称 SSH,是允许你通过无安全网络(例如 Internet)和远程系统之间安全访问/通信的加密网络协议。无论何时使用 SSH 在无安全网络上发...

linuxprobe16
25分钟前
0
0
sed命令

10月17日任务 9.4/9.5 sed 1.sed(上)(下) 1.sed 匹配功能 #sed -n ‘/root/’ p test.txt 将带有root的内容打印出来 同时支持 . * 还有 + 不过需要脱译,或者在前面选项加r。 支持{ } 支...

hhpuppy
36分钟前
1
0
day120-20181018-英语流利阅读-待学习

千禧一代注意了:一大波公司正向你的钱包袭来 Daniel 2018-10-18 1.今日导读 这几年,你有没有发现,不管是在微信公众号还是在抖音,有越来越多的商家和品牌开始玩起了网络用语和表情包,从卖...

飞鱼说编程
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部