当前位置：首页 > VUE

vue 实现上传

2026-01-13 04:45:15VUE

Vue 实现文件上传的方法

在 Vue 中实现文件上传可以通过多种方式完成，以下是几种常见的方法：

使用原生 HTML 的 input 元素

通过 HTML 的 input 元素设置 type="file"，结合 Vue 的事件绑定实现文件选择。

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

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

使用 axios 发送文件到后端

通过 axios 或其他 HTTP 库将文件上传到服务器。

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

<script>
import axios from 'axios';

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

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

使用第三方库（如 vue-dropzone）

对于更复杂的上传需求，可以使用第三方库如 vue-dropzone。

<template>
  <vue-dropzone ref="dropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</template>

<script>
import vueDropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';

export default {
  components: {
    vueDropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: '/upload',
        thumbnailWidth: 150,
        maxFilesize: 2,
        headers: { 'Authorization': 'Bearer token' }
      }
    };
  }
};
</script>

实现拖放上传

通过 HTML5 的拖放 API 实现拖放上传功能。

<template>
  <div 
    @dragover.prevent="dragover" 
    @dragleave.prevent="dragleave" 
    @drop.prevent="drop"
    :class="{ 'drag-active': isDragActive }"
  >
    拖放文件到此处
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragActive: false
    };
  },
  methods: {
    dragover() {
      this.isDragActive = true;
    },
    dragleave() {
      this.isDragActive = false;
    },
    drop(event) {
      this.isDragActive = false;
      const file = event.dataTransfer.files[0];
      console.log(file);
    }
  }
};
</script>

显示上传进度

通过 axios 的 onUploadProgress 回调显示上传进度。

<template>
  <input type="file" @change="handleFileUpload" />
  <progress :value="uploadProgress" max="100"></progress>
</template>

<script>
import axios from 'axios';

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

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
};
</script>