vue实现上传插件

2026-03-29 11:30:54VUE

使用 `<input type="file">` 基础实现

通过原生 <input> 元素结合 Vue 的 @change 事件监听文件选择：

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

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

通过第三方库 `vue-upload-component` 实现

安装依赖后，快速集成多文件上传、预览等功能：

vue实现上传插件

npm install vue-upload-component

<template>
  <file-upload
    v-model="files"
    post-action="/upload"
    @input-file="onFileChange"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: { FileUpload },
  data() {
    return { files: [] };
  },
  methods: {
    onFileChange(newFile) {
      console.log('File added:', newFile);
    }
  }
};
</script>

文件上传至服务器

使用 axios 发送文件到后端接口：

vue实现上传插件

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

<script>
import axios from 'axios';
export default {
  methods: {
    async uploadFile(event) {
      const file = event.target.files[0];
      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);
      }
    }
  }
};
</script>

拖拽上传实现

通过 @dragover 和 @drop 事件实现拖拽区域：

<template>
  <div 
    @dragover.prevent
    @drop.prevent="handleDrop"
    class="drop-area"
  >Drop files here</div>
</template>

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

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

文件预览与限制

通过 URL.createObjectURL 实现图片预览，限制文件类型和大小：

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

<script>
export default {
  data() {
    return { imageUrl: '' };
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0];
      if (file && file.size < 2 * 1024 * 1024) { // 2MB限制
        this.imageUrl = URL.createObjectURL(file);
      } else {
        alert('File must be an image under 2MB');
      }
    }
  }
};
</script>