原生js请求node.js上传图片接口，写前后端代码_node请求第三方接口传图片-CSDN博客

本文链接：https://blog.csdn.net/qq_45668489/article/details/121921857

1.先创建一个html文件，用来发起请求


```javascript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传图片</title>
</head>

<body>
    <input type="file" id="upload" accept="image/*" onfocus="this.blur()" />
    <script>
        window.onload = function () {
            var upload = document.getElementById('upload');
            // 监听一下上传文件
            upload.addEventListener('change', function () {
                var file = upload.files[0];
                console.log(upload.files);
                var reader = new FileReader(); //FileReader  读取文件内容
                reader.readAsDataURL(file); 
                reader.onload = function (e) {
                    var imgs = document.getElementById('imgs'); //每次要动态获取
                    // 判断页面是否存在预览标签
                    if (imgs) {
                        // 如果有这个标签就直接赋值src
                        imgs.src = this.result;
                    } else {
                        // 页面创建上传图片的预览标签
                        var img = document.createElement("img");
                        img.style = 'width: 100px;height: 100px;'
                        img.src = this.result
                        img.id = 'imgs'
                        document.getElementsByTagName('body')[0].appendChild(img);
                    }
                };
                var formData = new FormData(); // 创建FormData对象
                formData.append('file', file); // 通过append向form对象添加数据
                var http = new XMLHttpRequest(); //创建原生js请求
                http.open("POST", "http://localhost:3000/uploadImage"); //后端的上传接口地址
                http.setRequestHeader('access-control-allow-origin', '*') //设置请求头
                http.send(formData); //发起请求,传入参数
            }, false);
        }
    </script>
</body>

</html>

2.创建node项目

第一步：先创建一个文件夹，取名为app (文件名自定义)

第二步：在项目根目录下：npm init 初始化nodejs项目，自动会生成package.json文件

第三步：在项目根目录下：npm install express -S （安装express框架）

第四步：在项目根目录下：npm install --save moment （安装时间处理库）

第五步：在项目根目录下：npm install --save multer （安装处理文件的中间件）

在项目根目录下：运行命令 node app.js 启动项目
在浏览器中输入 http://localhost:3000/ 即可打开项目

3.编写node上传图片接口代码

app.js 文件编写

var express = require('express');
var app = express();

var multer = require('multer');
var moment = require('moment');
var timepath = moment().format('YYYY-MM-DD');


var destination = 'images/'+timepath; //创建文件夹
//将图片放到服务器
var storage = multer.diskStorage({
    // 如果你提供的 destination 是一个函数，你需要负责创建文件夹
    destination,
    //给上传文件重命名，获取添加后缀名
    filename: function (req, file, cb) {
        cb(null,  file.originalname);
     }
}); 
var upload = multer({
    storage: storage
});


//处理来自页面的ajax请求。单文件上传
app.post('/uploadImage', upload.any(), function(req, res, next) {
    //拼接文件上传后的路径
    var url = destination + '/' ;
    res.json({
        code: true,
        msg: '上传成功',
        imageUrl: url
    })

});

var server = app.listen(3000,function(){
    console.log('runing 3000...');
})