elementui plus + vue + express 使用multiparty,实现图片上传

1.安装multiparty第三方库

npm i multiparty

2.在app.js文件中,注册upload静态文件夹

app.use('/upload',express.static('upload'))

elementui plus + vue + express 使用multiparty,实现图片上传_第1张图片

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组件


              
       
//当前图片
const imageUrl = ref("");

//成功后的回调,获取图片路径
const handleAvatarSuccess = (res, file) => {
  imageUrl.value = "http://localhost:3333/" + res.img;  //获取到图片路径赋值显示
};

5.效果展示

elementui plus + vue + express 使用multiparty,实现图片上传_第2张图片

 

你可能感兴趣的:(vue.js,elementui,express)