Vue3+node上传头像

后端配置

目录配置

app.js文件

index.js文件

// 下载multiparty插件 npm i multiparty
var multiparty = require('multiparty')
router.post('/upload', async function (req, res) {
  var form = new multiparty.Form()
  form.uploadDir = "upload"
  form.parse(req, async (err, formData, imgData) => {
    let path = "http://localhost:3000/" + imgData.file[0].path
    // imgData.file[0].path为动态图片地址
    // 验证图片是否上传成功 http://localhost:端口号/+imgData.file[0].path
  })
  res.send({
    code: 200
  })
});

前端.vue文件

<el-upload class="avatar-uploader" action="http://127.0.0.1:端口号/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
  <img v-if="info.infos.img" :src="info.infos.img" class="avatar" />
  <el-icon v-else class="avatar-uploader-icon">
     <Plus />
  </el-icon>
</el-upload>

const handleAvatarSuccess = (
    response,
    uploadFile
) => {
    if(uploadFile.name){
        console.log(uploadFile.name);
    }
}