vue 怎么实现上传

2026-03-28 23:09:19VUE

Vue 文件上传实现方法

使用原生 input 元素

通过 HTML 的 <input type="file"> 元素实现基础文件上传功能。在 Vue 模板中添加文件选择控件，并通过 @change 事件处理文件选择。

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      console.log('Selected file:', file);
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以使用专门的文件上传库如 vue-upload-component 或 element-ui 的上传组件。

安装 element-ui 上传组件：

npm install element-ui

使用示例：

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

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      if (!isJPG) {
        this.$message.error('只能上传 JPG 格式图片');
      }
      return isJPG;
    },
    handleSuccess(response, file) {
      this.$message.success('上传成功');
    }
  }
}
</script>

自定义上传逻辑

通过 XMLHttpRequest 或 axios 实现自定义上传逻辑，适合需要精细控制上传过程的场景。

<template>
  <div>
    <input type="file" @change="uploadFile">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

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

拖拽上传

实现拖拽上传功能需要监听 dragover 和 drop 事件，并阻止默认行为。

<template>
  <div 
    @dragover.prevent
    @drop.prevent="handleDrop"
    class="drop-area">
    拖拽文件到此处上传
  </div>
</template>

<script>
export default {
  methods: {
    handleDrop(event) {
      const files = event.dataTransfer.files;
      if (files.length > 0) {
        console.log('拖拽文件:', files[0]);
      }
    }
  }
}
</script>

<style>
.drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
</style>

文件预览

对于图片文件，可以在上传前生成预览图，提升用户体验。

vue 怎么实现上传

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

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