因为项目原因，需要实现图片上传功能，最开始简单尝试了一下，发现以往对form图片上传方面的认知在这里完全解释不通，上网查了一下资料，自个儿弄了半天终于解决了，在此记录下来，以后或许还能用到或者持续更新维护。
首先说一下前台上传图片的知识点：
FormData：XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
基于这个基础，先构建前端代码：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/jquery-1.10.1.min.js"></script> <script src="/js/angular.js"></script> </head> <body ng-controller="appCtrl"> 上传图片：<input type="file" name="file" file-model="fileData" /> <button ng-click="uploadFile()">提交</button> 图片预览： <img src={{imgUrl}} alt=""> </body> </html> <script> var app=angular.module('myApp',[]); app.controller('appCtrl',['$scope','$http',function ($scope,$http) { $scope.fileData=null; $scope.imgUrl=null; $scope.uploadFile=function(){ var fd=new FormData(); var files=document.querySelector('input[type=file]').files[0]; fd.append('file',files); console.log(fd); $http({ method:'post', url:'http://192.168.1.41:2222/imgPost', data:fd, headers:{'Content-Type':undefined}, transformRequest: angular.identity }).then(function (data) { console.log(data); $scope.imgUrl=data.data.data; }) } }]); </script>
注意：FormData在创建表单数据的时候接收的值为dom节点
接下来后台代码：
/** * Created by admin on 2017/11/28. */ var express=require('express'); var app=express(); var multer=require('multer'); var path=require('path'); app.use(express.static(path.join(__dirname,'../lib'))); app.listen(2222,function(){ console.log('启动成功'); }); app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') if(req.method=="OPTIONS") res.sendStatus(200);/*让options请求快速返回*/ else next(); }); app.get('/',function(req,res){ res.sendFile(path.join(__dirname,'../uploadImg.html')); }); //设置文件上传的路径和文件命名 var storage=multer.diskStorage({ destination:function (req,res,cb) { //设置存放路径 //文件上传成功后会放入img下的upload文件夹 cb(null,'../lib/images/upload'); }, filename:function (req,file,cb) { //设置图片名称 // cb(null,file.originalname+new Date().getTime()); //设置文件名称为原本名称加时间戳 cb(null,file.originalname);//暂时先直接用文件原本的名称来替代 } }); var upload=multer({ storage:storage }) app.post('/imgPost',upload.single('file'), function(req, res, next){ // 拼接文件地址，req.headers.host获取服务器地址和端口，加上静态文件地址，加上文件名称 // var url = 'http://' + req.headers.host + 'images/upload/' + req.file.originalname; //由于设置了静态文件夹，所以此处只要直接返回静态文件路径加上文件名即可 var url ='images/upload/' + req.file.originalname; res.json({ code : 1, data : url }); res.end(); });