当前位置：首页 > VUE

vue实现上传头像显示

2026-02-21 09:20:47VUE

实现头像上传与显示功能

HTML部分

<template>
  <div class="avatar-upload">
    <img v-if="avatarUrl" :src="avatarUrl" class="avatar-preview">
    <input type="file" @change="handleFileChange" accept="image/*">
    <button @click="uploadAvatar">上传头像</button>
  </div>
</template>

JavaScript部分

<script>
export default {
  data() {
    return {
      selectedFile: null,
      avatarUrl: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
      if (this.selectedFile) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.avatarUrl = e.target.result
        }
        reader.readAsDataURL(this.selectedFile)
      }
    },
    uploadAvatar() {
      if (!this.selectedFile) return

      const formData = new FormData()
      formData.append('avatar', this.selectedFile)

      // 替换为实际API端点
      axios.post('/api/upload-avatar', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response.data)
      }).catch(error => {
        console.error('上传失败', error)
      })
    }
  }
}
</script>

CSS样式

<style scoped>
.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
}
</style>

服务器端处理

Node.js示例

const express = require('express')
const multer = require('multer')
const path = require('path')

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

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

  // 这里可以添加文件处理逻辑，如移动到永久存储位置
  res.json({
    message: '文件上传成功',
    filename: req.file.filename
  })
})

app.listen(3000, () => console.log('服务器运行中'))

进阶功能实现

图片裁剪

// 使用cropper.js库实现前端裁剪
import Cropper from 'cropperjs'

mounted() {
  this.cropper = new Cropper(this.$refs.imageElement, {
    aspectRatio: 1,
    viewMode: 1
  })
}

// 获取裁剪后的图片
getCroppedImage() {
  const canvas = this.cropper.getCroppedCanvas()
  return canvas.toDataURL('image/jpeg')
}

文件验证

vue实现上传头像显示

handleFileChange(event) {
  const file = event.target.files[0]
  if (!file) return

  // 验证文件类型
  const validTypes = ['image/jpeg', 'image/png']
  if (!validTypes.includes(file.type)) {
    alert('请上传JPEG或PNG格式的图片')
    return
  }

  // 验证文件大小(2MB以内)
  if (file.size > 2 * 1024 * 1024) {
    alert('图片大小不能超过2MB')
    return
  }

  this.selectedFile = file
  // 预览逻辑...
}