图片上传

基于node的图片上传

简述

在markdown中使用图片显得很不方便，查了下大概有如下几种方法：

![caption](figure path) 插入线上图片；
![caption](D:/xxx/md/1.png) 跟插入线上图片似乎一样，链接处填写相对路径，但我试了一下发现无法正常加载图片，只会显示图片占位标签；
使用base64方法，![markdown picture][markdownbase64]
使用html中img标签的形式
```
<div align="center">
	<img src="" width="50%">
</div>
```
试了一下还是使用线上图片比较方便，于是就想这写一个图片上传接口，为自己提供一个图片存储的仓库

· 首先我们已经基于express搭建了一个后端服务
· 其次我们使用mongidb数据库
· 使用Multer node.js 中间件，用于处理 multipart/form-data 类型的表单数据

multer.js

var multer = require("multer");
var path = require('path');
var storage = multer.diskStorage({
    //设置上传路径
    destination: function (req, file, cb) {
        //path.join(__dirname, 'public/views')
        cb(null, path.join(__dirname, '../public/uploads'));
    },
    // destination:path.join(__dirname, 'public/uploads/'),
    //设置上传后文件的名称
    filename: function (req, file, cb) {
        var fileList = (file.originalname).split("."); //名称拆分获取名称和文件后缀
        //console.log(file);
        var newName = fileList[0] + "-" + Date.now() + "." + fileList[fileList.length - 1];
        //为了方式重复的名称出现  我们采用名称+时间戳+文件后缀名
        cb(null, newName);
    }
});
var upload = multer({
    storage: storage
});
//导出公共的方法
module.exports = upload;

router.js

router.post("/uploads", upload.array('filename'), (req, res) => {
   //如果图片上传成功  返回图片上传的地址
  res.json({
    code: 200,
    url: config.baseURL + "/uploads/" + req.files[0].filename,
  })
})

在使用过程中特别要注意的是filename应于上传接口参数名保持一致

前端调用

uploadServer(data) {
    const formdata = new FormData();
    formdata.append("filename", data)
    $.ajax({
        url: 'http://xx.xxx.xxx.xxx/uploads',
        type: 'post',
        processData: false,
        contentType: false,
        data: formdata,
        success: function (result) {

        }
    })
}