element+nodejs图片上传、头像修改、文件上传

坏坏越

已于 2024-05-26 16:25:29 修改

阅读量637

点赞数 8

文章标签： javascript 开发语言 node.js vue.js

于 2024-05-26 16:04:44 首次发布

本文链接：https://blog.csdn.net/qq_52368602/article/details/139213733

版权

今天写一个vue3+nodejs头像上传修改的小部分~

一.创建vue和api文件

nodejs使用express框架

npm i express

二.前端调用

这边使用element-plus的avatar和upload，直接导入即可

upload:

<template>
  <el-upload
    class="avatar-uploader"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUplo