node.js实现图片提交

我的条件：

　　1.node环境

　　2.mysql安装配置

　　3.vue项目搭建

  一、前端提交代码

　　

  <form enctype="multipart/form-data" action="/upload" method="post" id="form" >
       <div><label>文件选择：</label><input type="file" accept="image/*"  ref="files" name="aaaa"/></div>
       <button value="上传3" @click.prevent="submit">提交</button>
  </form>

　　　　

 submit(){
        var formData = new FormData();
        formData.append('file',this.$refs.files.files[0]);
     
        this.$http('POST','/users/upload',formData ,(success)=>{
            this.$Toast(success.msg,4000)
            console.log(success)
        },(error)=>{
            this.$Toast(error.msg,4000)
            console.log(error)
        })
        
    },

 

　　　　当点击提交按钮后，先触发按钮的onclick事件，再触发form 的onsubmit 事件。

　　　　如果两个都return true或者 return 则进行默认的提交动作，因此在这两个阶段可以做其他的操作；如果onclick return false 则不触发onsubmit;若onsubmit return false 则不进行提交。这里需要注意，默认提交会进行页面跳转，因为我在onclick阶段使用ajax自定义提交（红色，网络请求部分是我自己的封装）

 

二、后端代码

node项目的入口文件index.js

const express = require('express')

　const Multer = require('multer')

const uploads= require('./uploads/index') 
var upload = Multer({ dest: 'uploadFiles/' });  
app.use('/public',express.static('public'));
app.use(upload.any());
app.post('/users/upload',(req,res)=>uploads.upload(req,res)) 

　　红色部分为自定义，

 

upload/index.js　

const fs = require('fs')
const path=require('path');

function upload(req,res){
    console.log(req.files[0])
    fs.readFile(req.files[0].path,(err,data)=>{
            if(err){return res.send('上传失败')}  
            fs.writeFile(path.join(__dirname,'../public/img/'+req.files[0].originalname),data,(err)=>{
                console.log(err)
                if(err){return res.send('写入失败')}
                res.send({err:0,msg:'上传ok'})
            })
        })
}

exports.upload=upload

　　　　上传之后为二进制文件，可以使用fs将二进制图片内容读到静态文件夹下，并取名文件名，这样就可以在public/img文件夹下看到相应的图片