当前位置：首页 > VUE

vue 实现图片上传demo

2026-02-24 16:08:51VUE

安装依赖

确保项目中已安装axios用于文件上传请求，若未安装可通过以下命令安装：

npm install axios

前端组件实现

创建图片上传组件ImageUpload.vue，包含文件选择、预览和上传功能：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <img v-if="previewUrl" :src="previewUrl" width="200" />
    <button @click="uploadImage" :disabled="!file">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      previewUrl: ''
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.previewUrl = URL.createObjectURL(this.file);
    },
    async uploadImage() {
      const formData = new FormData();
      formData.append('image', this.file);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('Upload success:', response.data);
      } catch (error) {
        console.error('Upload failed:', error);
      }
    }
  }
};
</script>

后端接口示例（Node.js）

创建简单的Express服务端接口处理上传：

vue 实现图片上传demo

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

app.post('/api/upload', upload.single('image'), (req, res) => {
  console.log('File received:', req.file);
  res.json({ message: 'File uploaded successfully' });
});

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

跨域处理

若前后端分离开发，需配置代理或CORS。在vue.config.js中添加：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

文件大小限制

可在前端和后端分别设置限制：前端验证文件大小：

vue 实现图片上传demo

handleFileChange(event) {
  const maxSize = 5 * 1024 * 1024; // 5MB
  if (event.target.files[0].size > maxSize) {
    alert('File too large');
    return;
  }
  // ...其余代码
}

后端限制（使用multer）：

const upload = multer({
  dest: 'uploads/',
  limits: { fileSize: 5 * 1024 * 1024 }
});

进度显示

通过axios的onUploadProgress实现上传进度条：

uploadImage() {
  const config = {
    headers: { 'Content-Type': 'multipart/form-data' },
    onUploadProgress: progressEvent => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`${percent}% uploaded`);
    }
  };
  axios.post('/api/upload', formData, config);
}