vue实现附件组件

Vue 实现附件组件的方法

基本文件上传功能

使用 HTML 的原生 <input type="file"> 元素结合 Vue 的数据绑定实现基础文件上传功能。通过 v-model 或 @change 事件获取用户选择的文件。

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

<script>
export default {
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) return;
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      // 调用 API 上传 formData
    }
  }
};
</script>

多文件上传支持

通过添加 multiple 属性允许用户选择多个文件，并使用 v-for 展示已选文件列表。

<template>
  <div>
    <input type="file" multiple @change="handleFilesChange" />
    <ul>
      <li v-for="(file, index) in files" :key="index">
        {{ file.name }}
        <button @click="removeFile(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFilesChange(event) {
      this.files = [...event.target.files];
    },
    removeFile(index) {
      this.files.splice(index, 1);
    }
  }
};
</script>

拖拽上传功能

利用 HTML5 的拖放 API 实现拖拽上传体验。需要阻止默认拖放行为并处理 drop 事件。

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

<script>
export default {
  methods: {
    handleDrop(e) {
      const files = e.dataTransfer.files;
      // 处理获取到的文件
    }
  }
};
</script>

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

文件预览功能

对于图片文件，可以使用 FileReader API 实现预览功能。

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
};
</script>

上传进度显示

使用 Axios 或其他 HTTP 库的上传进度事件实现进度条功能。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <progress :value="progress" max="100"></progress>
    {{ progress }}%
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.selectedFile);

      axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      });
    }
  }
};
</script>

文件类型和大小限制

在客户端验证文件类型和大小，提供即时反馈。

<template>
  <div>
    <input 
      type="file" 
      accept=".jpg,.jpeg,.png,.pdf"
      @change="validateFile"
    />
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    };
  },
  methods: {
    validateFile(event) {
      const file = event.target.files[0];
      const validTypes = ['image/jpeg', 'image/png', 'application/pdf'];
      const maxSize = 5 * 1024 * 1024; // 5MB

      if (!validTypes.includes(file.type)) {
        this.error = '仅支持 JPG, PNG 或 PDF 文件';
        return;
      }

      if (file.size > maxSize) {
        this.error = '文件大小不能超过 5MB';
        return;
      }

      this.error = '';
      // 文件验证通过
    }
  }
};
</script>

组件化封装

将上述功能封装为可复用的 Vue 组件，通过 props 接收配置参数，通过 emits 触发事件。

<template>
  <div class="file-uploader">
    <!-- 实现各种上传功能 -->
  </div>
</template>

<script>
export default {
  props: {
    multiple: Boolean,
    accept: String,
    maxSize: Number
  },
  emits: ['upload-success', 'upload-error'],
  methods: {
    // 各种处理方法
  }
};
</script>

这些方法可以根据实际需求组合使用，构建功能完善的附件上传组件。组件应该提供良好的用户体验，包括文件选择、预览、验证和上传状态反馈等功能。