vue.js+node简易版图片上传功能

图片处理是前后端开发常见的一个功能，最近在使用前后端分离开发方式来开发一个属于自己的网站。采用的技术为前端采用vue.js框架进行开发，后端采用nodejs的express框架。
网站有个功能，就是将表单图片上传到node后端指定的文件夹下。下面我分前后端两个方面实现此功能。
1.前端表单部分

<label>选择图片：</label>
<input ref='chooseImg' name="avatar" id='upfile' type='file'/> 
<button @click='submitImg'>点击上传</button>

js部分

submitImg(){
    let file=this.$refs.chooseImg.files[0];
    let form_data =new FormData();
    form_data.append('avatar',file);
    this.$http.post('/api/upload/uploadImage',form_data,{
       headers: {
        "Content-Type": "multipart/form-data"
       }
    }).then((res)=>{
      alert('上传成功！')
    })
},

node端路由处理

index.js

const express = require('express');
const routerApi = require('./src/router/router.js'); 
const app = express();
app.use('/api', routerApi);
app.listen(process.env.PORT || 5050);
console.log('app start successful on port:'+(process.env.PORT || 5050));

router.js

var express = require('express');
var router = express.Router();
var api = require('../api/api.js');
var app = express();
router.post('/upload/uploadImage', function (req, res, next) {
   api.uploadImages(req, res, next);
});

api.js

var path = require('path');   //路径管理模块
var fs = require('fs');       //文件管理模块
var formidable = require('formidable');  //处理表单模块
var uuid = require('node-uuid');    //生成id模块
// 上传图片并返回路径
  uploadImages(req,res,next){
   let form = new formidable.IncomingForm();
   form.uploadDir = rootDir + '/images/';
   form.parse(req, (error, fields, files) => {
    if(error){
      res.json({
        status:false,
        msg:'解析图片错误！'
      })
    }
    let result=[];
    for(let key in files){  // 遍历上传文件对象
      let obj={};
      let file = files[key];
      let fileName = uuid.v1()+'.jpg';  // 借助uuid模块重新生成唯一id。
      let newPath = form.uploadDir + fileName;
      fs.renameSync(file.path, newPath); // 新路径替换旧路径。
      obj.status='ok';
      obj.name=fileName;
      result.push(obj);
    }
    res.json({
      status:'ok',
      data:result
    })
   })
  },

完！

vue.js+node简易版图片上传功能

推荐阅读更多精彩内容