vue 实现文件上传

Vue 文件上传实现方法

使用原生 input 元素

创建一个文件上传表单，通过 @change 事件获取文件对象

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

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

使用 axios 发送文件

将文件通过 FormData 对象发送到服务器

methods: {
  async uploadFile(file) {
    const formData = new FormData();
    formData.append('file', 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);
    }
  }
}

使用第三方组件库

Element UI 的上传组件示例

<template>
  <el-upload
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button 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 false;
      }
      return true;
    },
    handleSuccess(response) {
      this.$message.success('上传成功');
    }
  }
}
</script>

实现拖拽上传

添加拖拽区域和事件处理

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

<script>
export default {
  methods: {
    handleDrop(e) {
      e.preventDefault();
      const files = e.dataTransfer.files;
      if (files.length) {
        this.uploadFile(files[0]);
      }
    }
  }
}
</script>

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

文件预览功能

在上传前显示图片预览

methods: {
  handleFileChange(event) {
    const file = event.target.files[0];
    if (!file.type.match('image.*')) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      this.previewImage = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

多文件上传处理

支持同时选择多个文件

methods: {
  handleMultipleFiles(event) {
    const files = Array.from(event.target.files);
    files.forEach(file => {
      this.uploadFile(file);
    });
  }
}

进度显示

显示文件上传进度

methods: {
  uploadWithProgress(file) {
    const formData = new FormData();
    formData.append('file', file);

    axios.post('/api/upload', formData, {
      headers: {'Content-Type': 'multipart/form-data'},
      onUploadProgress: progressEvent => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        this.uploadPercent = percentCompleted;
      }
    }).then(response => {
      console.log('Upload complete');
    });
  }
}

以上方法可以根据实际需求组合使用，实现完整的文件上传功能。