使用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-uploadclass="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"stripestyle="width: 100%"><el-table-columnprop="user"label="用户名"width="180"></el-table-column><el-table-columnprop="pass"label="密码"width="180"></el-table-column><el-table-columnlabel="头像"><template slot-scope="scope"><el-imagestyle="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.msgconsole.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;

使用multiparty实现文件上传相关推荐

node+express使用multiparty实现文件上传
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 作者|王小强来源|https://my.oschina.ne ...
在express项目中使用formidable multiparty实现文件上传
安装 formidable,multiparty 模块 npm install formidable,multiparty –save -d 表单上传 <form id="addFor ...
node.js中multiparty模块的介绍和文件上传测试
第一部分: multiparty模块是一个基于node.js的文件上传模块,模块中的方法和事件以及属性的介绍如下. 属性选项说明: encoding:设置输入表单字段的编码,默认为utf8. maxF ...
nodejs+multiparty 文件上传
通过表单提交上传文件: html代码 <form action="/uploadFile" method="post" enctype=" ...
AJAX实现图片文件上传
1.文件上传流程 1)客户端将文件数据发送给服务器 2)服务器保存上传的文件数据到服务器端 3)服务器响应给客户端一个文件访问地址 2.与服务器端的约定 1)键的名称(表单域名称):imagefile ...
nodejs实现文件上传
前段时间在做个人项目的时候,用到了nodejs服务端上传文件,现在回头把这个小结一下,作为记录. 本人上传文件时是基于express的multiparty,当然也可以使用connect-multipa ...
vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传
前言这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题,而且是一道在线 coding ...
node+express实现文件上传功能
在进行node web开发时,我们可能经常遇到上传文件的问题,这一块如果我们没有经验,可能会遇到很多坑,下面我将跟大家分享一下,实现文件上传的一些方式. 一.node+express文件上传的常用方式 ...
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...

使用multiparty实现文件上传

纯后端实现文件上传

前后端分离实现文件上传

使用multiparty实现文件上传相关推荐

最新文章

热门文章