专栏首页Google DartDart 服务端开发 文件上传 原

Dart 服务端开发 文件上传 原

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}');
  });
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AngularDart 4.0 高级-生命周期钩子 顶

    Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。

    南郭先生
  • 资源读取配置 原

    南郭先生
  • AngularDart4.0 英雄之旅-教程-06服务 顶

    不是一遍又一遍复制和粘贴相同的代码,而是创建一个可重用的数据服务,并将其注入到需要它的组件中。 使用单独的服务可使组件保持精简并专注于支持视图,并使用模拟服务对...

    南郭先生
  • GitHub项目推荐 | 精细农业图像数据的几何茎检测

    项目链接:https://github.com/PRBonn/geometrical_stem_detection

    AI研习社
  • angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等。下面是演示: <!DOCTYPE html> <html> <head> ...

    kklldog
  • angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等。下面是演示:

    kklldog
  • 清华副校长杨斌谈创新:创业者应“呆若木鸡”,追求价值内生

    大数据文摘
  • SQL注入原理分析与绕过案例.md

    注意:本文分享给安全从业人员,网站开发人员和运维人员在日常工作中使用和防范恶意攻击,请勿恶意使用下面描述技术进行非法操作。

    WeiyiGeek
  • POJ-1959 Darts

    Darts Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1286 ...

    ShenduCC
  • 连踩P2P和区块链两个大雷,极路由现金流断裂说明了什么?

    在公开信中,王楚云表示,受到合作伙伴“非法吸收公众存款”的影响,现在极路由的公司运作受到了严重影响,可能随时都有可能会倒下。尽管公开信一经发布引发了行业内诸多人...

    孟永辉

扫码关注云+社区

领取腾讯云代金券