Node.js实现图片上传API

Node.js实现图片上传API

1、项目准备

​ （1）创建项目文件夹 文件目录可参考： https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/demo/demo.png

​ （2）在项目文件夹下 初始化目录 运行 npm init -y 生成package.json文件

​ (3) 在项目文件下安装相关依赖 分别为：express、body-parser、cors、multer

​ 安装命令如下：

   安装express依赖：npm install express --save

​   安装body-parser依赖：npm install body-parser

​   第三方插件multer：npm install multer --save

​   安装cors配置跨域：npm install cors --save

2、文件准备

​ （1）在router文件夹下创建uploads文件夹用于存放生成的图片，再创建 upload.js 路由文件和 server.js 服务器文件

​ （2）在static文件夹下创建html文件夹用户存放html 、img文件夹用于存放上传的图片

3、代码部分

upload.js代码

​ （1）引用相关依赖

const express = require('express');

const router = express.Router();

const fs = require('fs');

const path=require('path');

//上传图片的模板
var multer =require('multer');

//生成的图片放入uploads文件夹下
var upload=multer({dest:'uploads/'})

​ (2) 上传图片接口 并导出路由

//图片上传必须用post方法  test是请求参数
 router.post('/img',upload.single('test'),(req,res)=>{

  //读取文件路径
  fs.readFile(req.file.path,(err,data)=>{


  if(err){return res.send('上传失败')}

  //如果读取成功*
  //声明图片名字为时间戳和随机数拼接成的尽量确保唯一性*
   let time=Date.now()+parseInt(Math.random()*999)+parseInt(Math.random()*2222);

  
  let extname=req.file.mimetype.split('/')[1]

  //拼接成图片名*
  let keepname=time+'.'+extname

  

  fs.writeFile(path.join(__dirname,'../static/img/'+keepname),data,(err)=>{

    if(err){return res.send('写入失败')}

    res.send({err:0,msg:'上传ok',data:keepname}) //这里上传成功后的信息

  });

 });

})

module.exports=router;//导出此路由

server.js代码

​ （1）引用相关依赖

const express = require('express')

var bodyParser = require('body-parser')

const app = express()

const cors=require('cors')//用来配置跨域

const path=require('path');

app.use(cors())

app.use(express.json*());

app.use(express.urlencoded({ extended: false }));

​ (2) 配置跨域

  app.all('*', function (req, res, next) {

  res.header("Access-Control-Allow-Origin", "*");

  res.header("Access-Control-Allow-Headers", "Content-Type");

  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

  res.header("X-Powered-By", ' 3.2.1');

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

  next();

 });

​ (3)路由配置

// 配置静态资源目录 通过域名能访问*
app.use(express.static(path.join(__dirname,"../static")))


//路由配置
const upload = require('../router/upload.js');

app.use('/upload',upload)

(4)端口配置 启动文件

var server = app.listen(3000, '127.0.0.1', function () {

  var host = server.address().address;

  var port = server.address().port;

  console.log("地址为 http://%s:%s", host, port);

 })
  

在router文件夹下打开终端 输入node server.js 启动文件 当出现 地址为 http://127.0.0.1:3000 表示启动成功

api接口请求路径为：http://127.0.0.1:3000/upload/img

4、请求示例

​ 在html文件夹下面建立html文件 ，并引用jquery包

（1）jq AJAX请求接口上传图片

     <input type="file" name='image' id="imagelist">
      <img src="">
     <button onclick="jq_ajax()"> 上传</button>

     <script>
        var url = "http://127.0.0.1:3000";
    function jq_ajax()
    {           
        
        // 获取file域里的图片信息
         var formData = new FormData()
         //创建formdata对象
        formData.append("test",$("#imagelist")[0].files[0])  
        // 将文件信息 append 进入formdata对象
        $.ajax({
            url: url +'/upload/img',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
               if (data.err==0) {
                   console.log(data)
                   $('img').attr('src','../img/'+data.data)
               }
            },
            error: function(jqXHR, textStatus, errorThrown){
                document.getElementById("status").innerHTML = "<span style='color:#EF0000'>出现错误！</span>";
            }
        });
    }
    
    </script>
    

(2) vue示例 axios请求接口 上传图片

​ 需导入 axios.js 和 vue.js 文件

 <div id="app"> 
    <input type="file" name='image' id="imagelist">
    <button @click="get()"> 上传</button>
    </div>
<script>
    var app = new  Vue({
     el:"#app",
     data:{},
     methods:{
        get:function(){
            var formData = new FormData()
            //创建formdata对象
             formData.append("test",$("#imagelist")[0].files[0])  
           axios.post('http://127.0.0.1:3000/upload/img',formData)
             .then(function(response){
               console.log(response)
             },function(err){})
             .catch(function(err){})
         },
        
     }
 })
    </script>