express 服务器保存图片及将图片返回前端

服务端保存图片

var express = require('express');
var router = express.Router();
var token = require('../tools/token')
var mysql = require('../tools/mysql')

var moment = require("moment");

var fs = require('fs');
const multer = require('multer');
const multiparty = require('multiparty');
var path = require("path");


var storage = multer.diskStorage({
    // 配置文件上传后存储的路径
    destination: function (req, file, cb) {
        // NodeJS的两个全局变量
        // console.log(__dirname);  //获取当前文件在服务器上的完整目录 
        // console.log(__filename); //获取当前文件在服务器上的完整路径 
        cb(null, path.join(__dirname, '../public/images'))
    },
    // 配置文件上传后存储的路径和文件名
    filename: function (req, file, cb) {
        console.log('file', file.originalname);
        cb(null, file.originalname)
    }
})
var upload = multer({ storage: storage })


//"file" 保存图片
router.post("/api/pic/upload", upload.single("file"), (req, res) => {
    let { gh } = req.body;


    let sql = `UPDATE user SET icon='${req.file.filename}' where gh=${gh}`

    try {
        mysql.query(sql, function (err, result) {
            if (err) {
                console.log(err)
                return
            }

            if (result.length != 0) {
                res.json({
                    status: 'succeed',
                    msg: "图片上传成功",
                })
            }
            else {
                res.json({
                    status: 'faild',
                    msg: '保存失败',
                })
            }
        })

    } catch (error) {
        res.json({
            status: 'faild',
            msg: '保存失败',
        })
    }
})

服务端返回图片

type
{
  "css": "text/css",
  "gif": "image/gif",
  "html": "text/html",
  "ico": "image/x-icon",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "js": "text/javascript",
  "json": "application/json",
  "pdf": "application/pdf",
  "png": "image/png",
  "svg": "image/svg+xml",
  "swf": "application/x-shockwave-flash",
  "tiff": "image/tiff",
  "txt": "text/plain",
  "wav": "audio/x-wav",
  "wma": "audio/x-ms-wma",
  "wmv": "video/x-ms-wmv",
  "xml": "text/xml"
}




// 返回前端
router.get('/api/pic/get', (req, res, next) => {

    
    const filePath = path.resolve(__dirname, `../public/images/${req.query.gh}.jpg`);
    // 给客户端返回一个文件流 type类型
    res.set( 'content-type', {"png": "image/png","jpg": "image/jpeg"} );//设置返回类型
    var stream = fs.createReadStream( filePath );
    var responseData = [];//存储文件流
    if (stream) {//判断状态
        stream.on( 'data', function( chunk ) {
          responseData.push( chunk );
        });
        stream.on( 'end', function() {
           var finalData = Buffer.concat( responseData );
           res.write( finalData );
           res.end();
        });
    }
})