vue实现上传图片

2026-02-18 17:33:09VUE

使用 `<input type="file">` 实现基础上传

在 Vue 中可以通过原生 HTML 的 <input type="file"> 实现图片上传功能。创建一个文件输入框，监听 change 事件获取用户选择的文件，并通过 FormData 将文件发送到服务器。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <button @click="submitFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    submitFile() {
      if (!this.selectedFile) return;
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      // 使用 axios 或其他 HTTP 库发送请求
      axios.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
        console.log('上传成功', response.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

使用第三方库（如 `vue-upload-component`）

对于更复杂的需求（如多文件上传、拖拽上传），可以使用第三方库简化开发。例如 vue-upload-component 提供了丰富的上传功能。

安装库：

npm install vue-upload-component

示例代码：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/api/upload"
      :multiple="true"
      @input-filter="inputFilter"
    ></file-upload>
    <button @click="$refs.upload.active = true">选择文件</button>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: { FileUpload },
  data() {
    return { files: [] };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (!newFile.type.startsWith('image/')) {
        return prevent();
      }
    }
  }
};
</script>

图片预览功能

在上传前预览图片可以通过 FileReader 实现。将文件转换为 Base64 或 Blob URL 并显示在页面上。

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" width="200">
  </div>
</template>

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

服务器端处理（Node.js 示例）

假设使用 Node.js 的 Express 框架接收上传的图片：

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log('文件已保存:', req.file);
  res.json({ url: `/uploads/${req.file.filename}` });
});

app.listen(3000, () => console.log('服务器启动'));