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

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.效果展示

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值