angular+nodejs+multer实现图片上传

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

 

 

 

　　

 posted on 2017-12-03 02:29  谢某某  阅读(457)  评论(0)  编辑  收藏  举报