在node.js上传文件
我们在node.js文件下的views目录下创建一个student.ejs文件
<!--文件上传-->
<form action="/up" method="post" enctype="multipart/form-data">
<p>
<span>
用户名
</span>
<input type="text" name="username">
</p>
<p>
<span>
身份证号
</span>
<input type="text" name="id">
</p>
<p>
<span>
头像
</span>
<input type="file" name="photo">
</p>
<input type="submit" value="提交">
</form>
注:只能发送post请求,提交文件的类型是file
默认情况下,enctype的值是application/x-www-form-urlencoded,不能用于文件上传,只有使用了multipart/form-data,才能完整的传递文件数据。
application/x-www-form-urlencoded不是不能上传文件,是只能上传文本格式的文件,multipart/form-data是将文件以二进制的形式上传,这样可以实现多种类型的文件上传。
下载multer上传文件
Multer 是一个 node.js 中间件,用于处理 multipart/form-data
类型的表单数据,它主要用于上传文件
var multer=require('multer')
var uploads=multer({dest:'./public/uploads'}) //文件上传的位置
var fs=require('fs')
var path=require('path')
router.post('/up',uploads.single('photo'),function (req,res){
console.log(req.body)
console.log(req.file)
})
运行node start
页面效果
在elementui使用upload进行文件上传
前端
<template>
<div class="home">
<el-input v-model="d.username" placeholder="请输入姓名"></el-input>
<el-input v-model="d.id" placeholder="请输入身份证号"></el-input>
<el-upload
class="avatar-uploader"
action="http://127.0.0.1:3000/up"
name="photo"
ref="upload"
:data="d"
:auto-upload="false"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button size="small" type="primary" @click="upload">点击上传</el-button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
},
data() {
return {
imageUrl: '',
d: {
username: "",
id: ""
}
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
upload() {
this.$refs.upload.submit();
}
}
}
</script>
<style>
.el-input {
width: 200px;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
后端不变