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

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结合的，反正是没问题了。代理配置是：

 "/uploadFile": {
    "target": "http://localhost:3000"
  }

跨域问题补充：后面又重新做了一个测试发现，express处理跨域的时候如果前台报的错中有这一句

The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

那么修改源码的方式是可以解决跨域问题的，修改的位置是：ng2-file-upload>file-upload>file-uploader.class.js的277行的xhr.withCredentials = item.withCredentials;，把这行注释掉。

初始化好之后就直接就可以选文件上传了

// 点击上传按钮之后
uploadFile() {
    this.uploader.queue[0].upload();// 开始上传
    // 文件上传进度
    this.uploader.queue[0].onProgress = function (number) {
      	 console.log("上传进度" + number);
    }
	// 文件上传完成
    this.uploader.queue[0].onComplete = function (response, status, headers) {
      	 if (status == 0) {
        	console.log("结束码：" + status);
      	 } else {
        	console.log("结束码：" + status + "响应体：" + response);
      	 }
    }
	// 文件上传错误
    this.uploader.queue[0].onError = function (response, status, headers) {
         console.log("错误码：" + status + "响应体：" + response);
    }
    // 上传文件成功后
    this.uploader.queue[0].onSuccess = function (response, status, headers) {
      	 if (status == 200) {
        	console.log("状态码：" + status + "上传成功" + response);
      	 } else {
        	console.log("状态码：" + status + "上传失败" + response);
      	 }
    };
  }

上面代码块中只有这句this.uploader.queue[0].upload();是真正进行上传的，其他都是看自己需求进行选择。FileUploader还有很多属性和方法，这里不进行介绍了，详情点击这里和这里

上面是angular中的编码，下面是node中的编码。

服务器是用node和express进行搭建的，怎么搭就不说了。因为ng2-file-upload上传文件是form-data类型的数据，一般的express中间件，比如body-parser是处理不了的，所以需要其他的中间件，就是multer中间件，中文文档在这里，写的已经很明了了。下面直接说使用。

var multer = require('multer');
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
    	// 设置保存路径，这里放在服务器根目录下的uploads文件夹
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
    	//这里使用原始名字(originalname的值)进行命名
        cb(null, file.originalname)
    }
})
// 默认的存储
// var upload = multer({ dest: 'uploads/' });
// 自定义的存储
var upload = multer({ storage: storage });

storage有两个选项可用，destination和filename。他们都是用来确定文件存储位置的函数。

destination是用来确定上传的文件应该存储在哪个文件夹中。也可以提供一个 string (例如 ‘uploads/’)。如果没有设置 destination，则使用操作系统默认的临时文件夹。

注意: 如果你提供的 destination 是一个函数，你需要负责创建文件夹。当提供一个字符串，multer 将确保这个文件夹是你创建的。

filename用于确定文件夹中的文件名的确定。 如果没有设置filename，每个文件将设置为一个随机文件名，并且是没有扩展名的。

express处理跨域：

const app = express();

app.all(function(req, res, next) {
 
  res.header("Access-Control-Allow-Origin", "http://127.0.0.1:4300");//这里写实际的前端地址
   
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
   
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

  res.header("Content-Type", "application/json;charset=utf-8");
   
  next();
   
  });

处理请求：

const express = require("express");
const router = express.Router();
router.post("/uploadFile", upload.single('uploadedfile'), (request, response, next) => {
    console.log(request.files);//upload.any()
    console.log(request.file);//upload.single('uploadedfile')
    response.send('{"ff":"ss"}');
});

这里只需要注意的一点是：upload.single('uploadedfile')，single(fieldname)接受一个以 fieldname命名的文件。这个文件的信息保存在 request.file中，这里的fieldname写的是ng2-file-upload初始化FileUploader的文件别名(itemAlias的值)。如果使用了single()名字却对不上会报错，如果是表单提交过来的那就写表单的name值。如果不知道怎么回事，或者不想设置文件命名，可以简单粗暴的使用upload.any()，使用这个方法将接受一切上传的文件。文件数组将保存在 request.files中。

到此就完成了文件的接收与保存进磁盘了，保存的路径如果是本例子的路径，那么就在node服务器文件夹的根目录下的uploads中。这里都只是简单的使用，如果有其他的需求，官方文档中都有相应的介绍，参考文档开发就可以了。