当前位置：首页 > VUE

vue实现文件上传思路

2026-02-21 10:01:38VUE

Vue 实现文件上传的基本思路

文件上传是 Web 开发中常见的功能，Vue 可以通过多种方式实现。以下是几种常见的实现思路：

使用原生 HTML 文件输入和 FormData

通过 HTML 的 <input type="file"> 元素获取文件，然后使用 FormData 对象将文件数据发送到服务器。

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

<script>
export default {
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      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 设计的文件上传组件，提供了更多高级功能。

<template>
  <div>
    <file-upload
      ref="upload"
      :post-action="'/api/upload'"
      @input-file="inputFile"
    ></file-upload>
    <button @click="$refs.upload.active = true">上传</button>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload
  },
  methods: {
    inputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        console.log('开始上传', newFile);
      }
      if (newFile && oldFile) {
        console.log('上传进度', newFile.progress);
      }
    }
  }
};
</script>

使用 Element UI 的上传组件

如果项目中使用 Element UI，可以直接使用其提供的上传组件。

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

<script>
export default {
  methods: {
    handleSuccess(response, file) {
      console.log('上传成功', response);
    },
    handleError(err, file) {
      console.error('上传失败', err);
    }
  }
};
</script>

分片上传和大文件处理

对于大文件，可以采用分片上传的方式，提高上传效率和稳定性。

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

<script>
export default {
  data() {
    return {
      file: null,
      chunkSize: 1024 * 1024, // 1MB
      chunks: []
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.chunks = this.splitFile(this.file);
    },
    splitFile(file) {
      const chunks = [];
      let start = 0;
      while (start < file.size) {
        const end = Math.min(start + this.chunkSize, file.size);
        chunks.push(file.slice(start, end));
        start = end;
      }
      return chunks;
    },
    async uploadChunks() {
      for (let i = 0; i < this.chunks.length; i++) {
        const formData = new FormData();
        formData.append('chunk', this.chunks[i]);
        formData.append('index', i);
        formData.append('total', this.chunks.length);
        formData.append('filename', this.file.name);

        await axios.post('/api/upload-chunk', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
      }
      console.log('所有分片上传完成');
    }
  }
};
</script>

拖拽上传

实现拖拽上传功能，提升用户体验。

<template>
  <div
    @dragover.prevent="dragover"
    @dragleave.prevent="dragleave"
    @drop.prevent="drop"
    :class="{ 'drag-active': isDragActive }"
  >
    <p>拖拽文件到此处上传</p>
    <input type="file" @change="handleFileChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragActive: false
    };
  },
  methods: {
    dragover() {
      this.isDragActive = true;
    },
    dragleave() {
      this.isDragActive = false;
    },
    drop(event) {
      this.isDragActive = false;
      this.file = event.dataTransfer.files[0];
      this.uploadFile();
    },
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.uploadFile();
    },
    uploadFile() {
      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>