vue实现上传

2026-01-12 23:14:39VUE

Vue 实现文件上传

在 Vue 中实现文件上传功能可以通过原生 HTML5 的 <input type="file"> 元素结合 Vue 的数据绑定和事件处理来实现。以下是几种常见的实现方式：

使用原生 HTML5 文件上传

创建一个简单的文件上传组件，通过 v-on:change 监听文件选择事件：

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

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

使用第三方库

如果需要更丰富的上传功能（如拖拽上传、多文件上传、进度显示等），可以使用第三方库如 vue-upload-component 或 element-ui 的上传组件。

以 element-ui 为例：

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

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过 2MB');
      }
      return isLt2M;
    },
    handleSuccess(response, file) {
      this.$message.success('上传成功');
    },
    handleError(err, file) {
      this.$message.error('上传失败');
    }
  }
};
</script>

拖拽上传

实现拖拽上传功能可以通过监听 dragover 和 drop 事件：

<template>
  <div
    @dragover.prevent="dragover"
    @drop.prevent="drop"
    class="dropzone">
    <p>拖拽文件到此处上传</p>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  methods: {
    dragover(event) {
      event.currentTarget.classList.add('dragover');
    },
    drop(event) {
      event.currentTarget.classList.remove('dragover');
      this.file = event.dataTransfer.files[0];
    },
    handleFileUpload(event) {
      this.file = event.target.files[0];
    }
  }
};
</script>

<style>
.dropzone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
.dragover {
  border-color: #000;
}
</style>

多文件上传

支持多文件上传可以通过设置 input 的 multiple 属性：

<template>
  <div>
    <input type="file" multiple @change="handleFileUpload" />
    <button @click="uploadFiles">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileUpload(event) {
      this.files = event.target.files;
    },
    uploadFiles() {
      if (this.files.length === 0) {
        alert('请先选择文件');
        return;
      }
      const formData = new FormData();
      for (let i = 0; i < this.files.length; i++) {
        formData.append('files', this.files[i]);
      }
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

以上方法涵盖了 Vue 中实现文件上传的常见需求，可以根据具体场景选择合适的方式。

vue实现上传