使用multiparty实现文件上传

纯后端实现文件上传

下载模块

npm i multiparty

引入模块

var multerparty=require('multiparty')

使用

//使用post方法提交
router.post('/upimg',function(req,res){
//创建一个multiparty类型的表单对象
  var form=new multerparty.Form()
//设置图片的上传路径
  form.uploadDir='public/uploads'

//配置表单数据的解析方法
  form.parse(req,(err,data,files)=>{
     console.log(data);   //data打印的是form表单里面的提交的表单数据，例如：用户名，密码等数据
     console.log(files); //files打印的是上传文件的信息

var dev={
      user:data.user[0],
      phone:data.phone[0],
      email:data.email[0],
      imgs:path.basename(files.imgs[0].path)
    }
    // 创建一个json文件夹，文件夹里面是一个空的列表，首先把那个json文件读出来
    var user=JSON.parse(fs.readFileSync('userliat.json','utf-8'))
    // 把获取的数据添加进去
    user.push(dev)
    // console.log(user);
    // 文件写入
    fs.writeFileSync('userliat.json',JSON.stringify(user),'utf-8')

  })

  res.json({msg:'ok'})
})

页面代码

//纯后端，指定post方法提交，必须指定enctype 
<form action="/users/upimg" method="post" enctype="multipart/form-data">
        用户名：<input type="text" name="user" id=""><br>
        手机号：<input type="text" name="phone" id=""><br>
        邮箱：<input type="text" name="email" id=""><br>
//上传文件使用file
        头像:<input type="file" name="imgs"><br>
//提交数据使用submit提交
        <input type="submit" value="提交">
    </form>

页面渲染

<table>
      <tr>
          <td>用户名</td>
          <td>手机号</td>
          <td>邮箱</td>
          <td>头像</td>
      </tr>
      <% user.forEach(item=>{ %>
        <tr>
            <td><%= item.user  %></td>
            <td><%= item.phone  %></td>
            <td><%= item.email  %></td>
            <td><img src="uploads/<%= item.imgs  %>" alt="" ></td>
        </tr>
      <% })   %>
  </table>

---

前后端分离实现文件上传

前端代码

<template>
  <div class="home">
    用户名：<el-input type='text' v-model='addobj.user'></el-input><br>
    密码：<el-input type='text' v-model="addobj.pass"></el-input><br>
    头像:<el-upload
      class="upload-demo"
      action="http://127.0.0.1:3000/add"
      :on-success='handleSuncce'
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
     
    </el-upload><br>
    <el-button type='primary' @click="addok">确认添加</el-button>

      <el-table
    :data="list"
    stripe
    style="width: 100%">
    <el-table-column
      prop="user"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="pass"
      label="密码"
      width="180">
    </el-table-column>
    <el-table-column
     
      label="头像">
      <template slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="'http://127.0.0.1:3000/upload/'+scope.row.pic"
        ></el-image>
      </template>   
    </el-table-column>
 
  </el-table>
  </div>
</template>

<script>

// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
      data() {
      return {
        list:[],
        addobj:{
          user:'',
          pass:'',
          pic:''
        }
      };
    },
    methods: {
      // 获取数据，渲染
      async getuser(){
        var r=await this.http.get('list')
        console.log(r);
        this.list=r.data.data
      },
      // 确认添加
      async addok(){
        var r=await this.http.post('doadd',this.addobj)
        this.getuser()
        console.log(r);
      },
      // 上传图片成功返回的数据
      handleSuncce(res) {
        console.log(res);
        this.addobj.pic=res.msg
        console.log(this.addobj)
      }
    },
    mounted(){
     this.getuser()
    }
};
</script>
<style lang="less" scoped>

</style>

后端代码

var express = require('express');
var router = express.Router();
var fs=require('fs')
// 导入multiparty模块
var multiparty=require('multiparty');
var path=require('path')


// 上传文件
router.post('/add',(req,res)=>{
//创建一个multiparty类型的表单对象
  let form=new multiparty.Form()
//设置提交的路径,upload目录不会自动创建，需要手动创建
  form.uploadDir='public/upload'
  form.parse(req,(err,data,fileds)=>{
    res.send({
      msg:path.basename(fileds.file[0].path)
    })
  })
})
// 添加功能
router.post('/doadd',(req,res)=>{
  var addobj=req.body
//手动创建一个user.json文件，在里面创建一个空的数组
  let readUser=JSON.parse(fs.readFileSync('user.json','utf-8'))
//把数据添加到readUser里面，并写入
  readUser.push(addobj)
  fs.writeFileSync('user.json',JSON.stringify(readUser),'utf-8')
  res.send({data:readUser})
})
// 查看
router.get('/list',(req,res)=>{
  let userlist=JSON.parse(fs.readFileSync('user.json','utf-8'))
  res.send({
    data:userlist
  })
})

module.exports = router;