node.js+express+vue 的图片上传

node.js+express+vue 的图片上传/文件上传

首先说一下；其实图片上传和文件上传是一样的；只要不限制element-ui的上传格式就是可以了

一、node.js中用到的内容有如下：

1. multer（用于文件上传）
2. moment（用于获取当前时间）
3. fs（文件系统；用于创建上传文件的路径）

二、Vue

主要用了element-ui的upload组件

三、node.js 的代码

//先引入模块
const multer=require('multer');
const fs=require('fs');
const path=require('path');
const moment=require('moment')

//在public/upload的文件下；通过当前日期创建目录
let uploadDir=`./public/upload/${moment().format('YYYYMMDD')}`;
fs.mkdirSync(uploadDir,{
    recursive:true  //递归创建目录
});
//multer配置
let upload=multer({dest:uploadDir});
router.use(upload.any())

上传图片代码主要是对地址的操作

//上传图片
router.post('/upload',function(req,res){
//获取标题
if (req.body.Ttitle!=''){
  var name=req.body.Ttitle;
}else {
  var name=req.files[0].originalname.split(".")[0];
}
console.log(name)
console.log(req.files)
let file=req.files[0].filename+path.extname(req.files[0].originalname); //拼接   重新定义的文件名+尾缀
let newfile=req.files[0].path+path.extname(req.files[0].originalname);  // 把上传的图片文件重命名-->添加尾缀
console.log(req.files[0].path);  
 let picPath=`http://localhost:3000/upload/${moment().format('YYYYMMDD')}/`+file; //之后用于存储在数据库的路径
fs.rename(req.files[0].path,newfile,function (err) {  // 将上传的文件重命名   因为上传之后req.files[0].path是没有尾缀的
  if (err){
    console.log('上传失败'+err)
    res.status(400).send({flag:true,msg:"失败"})
  }else{
      console.log("上传成功")
      res.status(200).send({flag:true,msg:"成功",site:picPath})  //将数据返回给前端
  }
})
})

req.files的内容（上方代码的操作对象）

四、vue的代码

vue的代码；看element-ui的官网就可以找到（Upload 上传）
点击访问element-ui

<el-form-item label="商品图片" required >
            <el-upload
                    class="upload-demo"
                    action="api/upload"  //自定义
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="uploadSuccess"
                    ref='upload'
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>

效果图

然后就根据自己的需求对数据进行存储或者操作啦！！！

初来乍到；如果有什么问题或者bug可以提出来；不喜勿喷