ng2-file-upload+node.js+express实现文件上传并保存本地

最新推荐文章于 2024-08-10 07:31:26 发布

不要葱花

最新推荐文章于 2024-08-10 07:31:26 发布

阅读量756

点赞数 1

分类专栏： Angular 文章标签： angular express

本文链接：https://blog.csdn.net/moqiuqin/article/details/94313905

版权

本文档介绍如何利用ng2-file-upload在Angular应用中实现文件上传，同时通过node.js和express处理上传，并解决跨域问题。在Angular中配置代理以规避跨域限制，而在node.js端，使用multer中间件处理multipart/form-data类型的文件。文件上传后保存在服务器指定的目录下，详细步骤和关键代码已给出。

摘要由CSDN通过智能技术生成

ng2-file-upload这个包挺好用的，但是好像没有人维护了，GitHub上的最新记录已经是两年之前了。
常规操作：
1、装包：npm i ng2-file-upload --save
2、注册相应的模块：在angular的根组件中注册CommonModule和FileUploadModule，FileUploadModule这个模块没有智能提示就手动输入import { FileUploadModule } from 'ng2-file-upload';
3、使用：

html文件：

<input type="file" ng2FileSelect [uploader]="uploader" 
	(change)="selectedFileOnChanged($event)" />
<button (click)="uploadFile($event)" >上传</button>

这里直接复制粘贴就好了，没什么好说的，change事件看自己选择，如果需要对文件处理就写，click事件也是看自己选择，这里是点击上传按钮之后才进行上传。

ts文件

  uploader: FileUploader;
  ngOnInit() {
   
  	// 要不要在ngOnInit中初始化FileUploader由自己选择
    this.uploader = new FileUploader({
   
      // url: "http://127.0.0.1:3000/uploadFile",
      url: "http://127.0.0.1:4200/uploadFile",
      method: "POST",
      itemAlias: "uploadedfile",//文件别名
      autoUpload: false,//是否选择之后就立即上传
      // headers: [
      //   { name: 'token', value: "sad" }, { name: 'Accept', value: '*/*' }
      // ]
    });
  }

在上面的初始化参数中itemAlias文件别名的作用与后台使用multer有关，这里体现不出作用。

这里有一个问题我一直不明白是怎么一回事，url是要上传到的服务器地址，3000端口是我的服务器端口，如果是这个地址的话会产生跨域的问题，跨域的问题我一直没能解决，包括使用官方在后台处理跨域的方式和网上其他的方式（禁传cookie，手动禁和改源码）都不可行。最后因为我在angular中使用了代理，直接写angular的端口，并进行了代理转发，跨域问题就没有了，我不明白ng2-file-upload是怎么和angular结合的，反正是没问题了。代理配置是