您的位置：首页 > Web前端 > Node.js

angular+nodejs+multer实现图片上传

2017-12-03 02:29 696 查看

因为项目原因，需要实现图片上传功能，最开始简单尝试了一下，发现以往对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();
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航