1.安装multiparty第三方库
npm i multiparty
2.在app.js文件中,注册upload静态文件夹
app.use('/upload',express.static('upload'))
3.在接口文件中引入mul库,并定义接口
var mul = require('multiparty') //引入multiparty
router.post("/title",(req,res)=>{
let form = new mul.Form() //创建mul的form实例
form.uploadDir = 'upload'
form.parse(req,(err,formdata,img)=>{
res.send({
img:img.file[0].path //获取到图片路径
})
})
})
4.在vue中使用element plus的upload组件
<el-upload
class="avatar-uploader"
action="http://localhost:3333/title" //访问图片接口
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="imageUrl"
style="width: 90px; height: 90px; border-radius: 50%"
:src="imageUrl" //展示当前图片
class="avatar"
/>
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
//当前图片
const imageUrl = ref("");
//成功后的回调,获取图片路径
const handleAvatarSuccess = (res, file) => {
imageUrl.value = "http://localhost:3333/" + res.img; //获取到图片路径赋值显示
};
5.效果展示