前言

对于广大小白来说，图片上传简直是上传难，难于上青天！废话不多说，步入正题，您就瞧好吧！

步骤一：前端使用element ui组件（upload上传）

我个人喜欢使用第二个组件：

element ui代码如下：

样式在此我不做过多解释，大家自行调试！

action（必须填写）就是我们图片要上传的地址，待会我会在下面展示我的前端实战代码

show-file-list：是否显示已上传文件列表（这句话不用删也不用管，留着即可）

before-upload ：使用 before-upload 限制用户上传的图片格式和大小。（我一般都会删除）

注意！！！

on-success很重要，这个方法是文件上传成功时的钩子，必须借助它实现功能！！！

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":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><style>.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><script>export default {data() {return {imageUrl: ''};},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;}}}
</script>

这里是我自己的图片上传前端实战代码：

我为组件添加了name属性，相当于给他加了个别名叫做img。

<template><div><el-upload name="img" class="avatar-uploader"             action="http://127.0.0.1:8700/upload"         :show-file-list="false" :on-success="hanadle_success"><img v-if="addform.img" :src="addform.img" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div>
</template><script>
export default {name: "app",data() {return {addform:{img:''}};},methods: {hanadle_success(res, file, fileList) {this.addform.img = res.path; //实现单独上传//下面这个实现多种上传，两个都写上也没事，用不到也不报错const result = fileList.every((item) => item.status === "success");if (result) {fileList.map((item) => {item.response &&this.fileList.push({name: "",url: item.response.path,});return true;});}},},
};
</script><style scoped>
.avatar-uploader .el-upload {border: 10px dashed gold;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {border: 1px dashed gainsboro;font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>

下面说一下后端代码：

注意记得创建一个upload文件夹用来存储前端存进来的静态资源嗷

const express = require('express')//通过npm i express命令下载模块并导入
const app = express()//创建实例
const multiparty = require('multiparty')//通过npm i multiparty命令下载模块并导入
app.use('/upload',express.static('upload'))//将upload文件作为静态资源文件
app.post('/upload',(req,res)=>{const form = new multiparty.Form()form.uploadDir = './upload'form.parse(req,(err,fields,fiels)=>{res.send({//拼接路径，我的端口号是8700//这里的img对象我前面定义name属性的别名imgpath:'http://127.0.0.1:8700/'+fiels.img[0].path })})
})const port = 8700
app.listen(port, () => console.log(`Server running at  http://127.0.0.1:${port}`))