vue 实现上传

2026-01-08 00:40:24VUE

Vue 实现文件上传

使用 Vue 实现文件上传可以通过原生 HTML 的 <input type="file"> 或第三方库（如 axios、vue-upload-component）完成。以下是几种常见方法：

使用原生 HTML 和 `axios` 上传文件

通过 <input type="file"> 获取文件，结合 FormData 和 axios 发送到服务器。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) return;

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

      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 是一个专为 Vue 设计的文件上传组件，支持多文件上传、拖拽上传等功能。

安装依赖：

npm install vue-upload-component

示例代码：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/api/upload"
      @input-file="onInputFile"
    ></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: {
    onInputFile(newFile, oldFile) {
      if (newFile && newFile.success) {
        console.log('上传成功', newFile.response);
      }
    }
  }
};
</script>

使用 `Element UI` 的上传组件

如果项目中使用 Element UI，可以直接使用其 el-upload 组件。

安装依赖：

npm install element-ui

示例代码：

<template>
  <div>
    <el-upload
      action="/api/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isAllowed = file.type === 'image/jpeg';
      if (!isAllowed) {
        this.$message.error('只能上传 JPG 文件');
      }
      return isAllowed;
    },
    handleSuccess(response) {
      console.log('上传成功', response);
    }
  }
};
</script>

后端接口注意事项

确保后端接口支持文件上传，并正确处理 multipart/form-data 格式。例如，Node.js + Express 的示例：

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

const app = express();

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.json({ message: '文件上传成功' });
});

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