文档章节

Dart 服务端开发 文件上传

scooplol
 scooplol
发布于 07/20 19:42
字数 322
阅读 5
收藏 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
粉丝 13
博文 75
码字总数 180250
作品 0
南充
程序员
Dart 服务端框架--Redstone

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

红薯
2015/04/13
1K
0
最火移动端跨平台方案盘点:React Native、weex、Flutter

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

JackJiang2011
08/13
0
0
Google 宣布重启 Dart 编程语言,应对程序开发挑战

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

周其
02/25
0
13
Dart语言遭遇重大挫折:Chrome将不再内置Dart VM

原文出处:CSDN - 刘江 2011年曝光的Dart语言曾经引起了很大关注,毕竟它系出名门Google,而且背后是V8引擎和Java Hotspot两大虚拟机的缔造者Lars Bak,团队里还有Gilad Bracha(Java语言和J...

CSDN - 刘江
2015/03/27
0
0
Dart M2 发布,Google 结构化编程语言

Dart是一种基于类的可选类型化编程语言,设计用于创建Web应用程序。 Google称,Dart的设计目标是为Web编程创造结构化但又富有灵活性的语言;编程方法一目了然,符合程序员的自然习惯,易于学...

oschina
2012/12/25
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iOS开发用到的图片尺寸汇总

启动图 型号 竖屏 横屏 iPhone SE 640px × 1136px 1136px × 640px iPhone 6s 750px × 1334px 1334px × 750px iPhone 6s Plus 1242px × 2208px 2208px × 1242px iPhone 7 750px × 1334......

业界小白
33分钟前
0
0
浅谈redis

redis是一个开源,内存式的健值存储数据库,也被称为健值存储的字典服务器。健值类型有字符串,hash(哈希类型),set(集合),list(列表) 和有序集合 特征细节: 内存式:redis将健值存储在主...

拐美人
40分钟前
0
0
无限扩容,按需使用!ZStack推出基于阿里云NAS的文件存储服务

日前,ZStack发布2.6.0版本,正式宣布推出基于阿里云NAS的文件存储服务。得益于业界领先的阿里云分布式存储架构,融合NAS后的ZStack 2.6.0拥有高性能、高可靠、容量无限扩展、一键操作、按需...

ZStack社区版
42分钟前
1
0
崛起于Springboot2.X之Mongodb多数据源处理(35)

多数据源:4个mongodb库! 目录结构图: 1、添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId>......

木九天
48分钟前
0
0
如何获取显示器的EDID信息

Q1: 为什么要写这篇文章? A1:在最近的工作中遇到了不少问题,其中很多都是和EDID相关的。可以说,作为一家以“显示”为生的企业,我们时时刻刻在与EDID打交道。EDID这东西很简单,但是如果...

DB_Terrill
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部