vue实现上传头像显示

2026-01-20 17:35:02VUE

Vue 实现上传头像并显示

前端实现（Vue 3 + Element Plus）

模板部分

<template>
<div class="avatar-upload">
 <el-upload
   action="#"
   :auto-upload="false"
   :show-file-list="false"
   :on-change="handleChange"
 >
   <img v-if="imageUrl" :src="imageUrl" class="avatar" />
   <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
 </el-upload>
</div>
</template>

脚本部分


<script setup>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';

const imageUrl = ref('');

const handleChange = (file) => { const reader = new FileReader(); reader.onload = (e) => { imageUrl.value = e.target.result; // 这里可以添加上传到服务器的逻辑 }; reader.readAsDataURL(file.raw); };

```

样式部分


<style scoped>
.avatar-upload {
width: 150px;
height: 150px;
border: 1px dashed #d9d9d9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.avatar { width: 100%; height: 100%; object-fit: cover; }

.avatar-uploader-icon { font-size: 28px; color: #8c939d; }

```

上传到服务器实现

修改handleChange方法


const handleChange = async (file) => {
const formData = new FormData();
formData.append('avatar', file.raw);

try { const response = await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); imageUrl.value = response.data.url; } catch (error) { console.error('上传失败:', error); } };


#### 服务器端实现（Node.js示例）

1. Express路由处理
```javascript
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('avatar'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('没有上传文件');
  }

  const fileUrl = `/uploads/${req.file.filename}`;
  res.json({ url: fileUrl });
});

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));