vue实现上传头像

使用 Vue 实现上传头像

前端实现

创建一个文件上传组件，使用 <input type="file"> 元素选择文件，并通过 FileReader 预览图片。

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 200px; max-height: 200px;" />
    <button @click="uploadImage" :disabled="!file">上传</button>
  </div>
</template>

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

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('上传成功', response.data);
      } catch (error) {
        console.error('上传失败', error);
      }
    }
  }
};
</script>

后端处理

使用 Node.js 和 Express 处理文件上传，保存到服务器或云存储。

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('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }

  // 处理文件，例如保存到云存储或数据库
  console.log('File uploaded:', req.file);
  res.json({ message: 'File uploaded successfully', file: req.file });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

云存储集成

使用阿里云 OSS 或 AWS S3 存储头像文件，提高可靠性和访问速度。

const OSS = require('ali-oss');

const client = new OSS({
  region: 'your-region',
  accessKeyId: 'your-access-key-id',
  accessKeySecret: 'your-access-key-secret',
  bucket: 'your-bucket-name'
});

app.post('/api/upload', upload.single('file'), async (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }

  try {
    const result = await client.put(`avatars/${req.file.originalname}`, req.file.path);
    res.json({ message: 'File uploaded to OSS successfully', url: result.url });
  } catch (err) {
    console.error('OSS upload error:', err);
    res.status(500).send('Failed to upload file to OSS');
  }
});

图片裁剪与压缩

使用 cropperjs 实现前端图片裁剪，优化用户体验。

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <div v-if="imageUrl">
      <img ref="image" :src="imageUrl" alt="Cropper" style="max-width: 500px;" />
    </div>
    <button @click="cropImage" :disabled="!cropper">裁剪</button>
    <button @click="uploadImage" :disabled="!croppedImage">上传</button>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  data() {
    return {
      imageUrl: null,
      cropper: null,
      croppedImage: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result;
          this.$nextTick(() => {
            this.cropper = new Cropper(this.$refs.image, {
              aspectRatio: 1,
              viewMode: 1
            });
          });
        };
        reader.readAsDataURL(file);
      }
    },
    cropImage() {
      if (this.cropper) {
        const canvas = this.cropper.getCroppedCanvas();
        this.croppedImage = canvas.toDataURL('image/jpeg');
      }
    },
    async uploadImage() {
      if (!this.croppedImage) return;

      const blob = await fetch(this.croppedImage).then(res => res.blob());
      const formData = new FormData();
      formData.append('file', blob, 'avatar.jpg');

      try {
        const response = await axios.post('/api/upload', formData);
        console.log('上传成功', response.data);
      } catch (error) {
        console.error('上传失败', error);
      }
    }
  }
};
</script>

数据库存储

将头像 URL 保存到用户数据中，关联用户 ID。

// 假设使用 MongoDB 和 Mongoose
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
  username: String,
  avatarUrl: String
});
const User = mongoose.model('User', userSchema);

app.post('/api/upload', upload.single('file'), async (req, res) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }

  try {
    const user = await User.findById(req.user.id);
    user.avatarUrl = `https://your-bucket.oss-cn-hangzhou.aliyuncs.com/avatars/${req.file.originalname}`;
    await user.save();
    res.json({ message: 'Avatar updated successfully', avatarUrl: user.avatarUrl });
  } catch (err) {
    console.error('Database error:', err);
    res.status(500).send('Failed to update avatar');
  }
});