vue实现附件上传

文件上传的基本实现

在Vue中实现文件上传可以通过原生HTML的<input type="file">元素结合Vue的数据绑定和事件处理来完成。创建一个文件上传组件，监听change事件获取用户选择的文件。

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

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      if (!this.selectedFile) return;

      const formData = new FormData();
      formData.append('file', this.selectedFile);

      // 使用axios或其他HTTP库发送请求
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

多文件上传支持

如果需要支持多文件上传，可以修改<input>元素的multiple属性，并调整事件处理方法以处理多个文件。

<input type="file" multiple @change="handleFilesChange" />

methods: {
  handleFilesChange(event) {
    this.selectedFiles = Array.from(event.target.files);
  },
  uploadFiles() {
    if (!this.selectedFiles.length) return;

    const formData = new FormData();
    this.selectedFiles.forEach(file => {
      formData.append('files[]', file);
    });

    axios.post('/api/upload-multiple', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      console.log('上传成功', response.data);
    });
  }
}

文件预览与限制

在上传前预览文件内容或限制文件类型和大小可以提升用户体验。通过File API读取文件内容，在模板中显示预览。

<template>
  <div>
    <input 
      type="file" 
      accept="image/*" 
      @change="handleFileChange" 
    />
    <img v-if="previewUrl" :src="previewUrl" width="200" />
    <p v-if="error">{{ error }}</p>
  </div>
</template>

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

      // 文件大小限制（2MB）
      if (file.size > 2 * 1024 * 1024) {
        this.error = '文件大小不能超过2MB';
        return;
      }

      // 生成预览
      const reader = new FileReader();
      reader.onload = (e) => {
        this.previewUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
};
</script>

进度显示与拖拽上传

对于大文件上传，显示上传进度和提供拖拽上传功能可以改善用户体验。使用axios的onUploadProgress回调实现进度显示，通过HTML5拖拽API实现拖拽上传。

<template>
  <div 
    @dragover.prevent="dragover = true"
    @dragleave.prevent="dragover = false"
    @drop.prevent="handleDrop"
    :class="{ 'dragover': dragover }"
  >
    <p>拖拽文件到此处或点击选择文件</p>
    <input type="file" @change="handleFileChange" />
    <div v-if="progress >= 0">
      上传进度: {{ progress }}%
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragover: false,
      progress: -1
    };
  },
  methods: {
    handleDrop(event) {
      this.dragover = false;
      this.selectedFile = event.dataTransfer.files[0];
      this.uploadFile();
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.selectedFile);

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      }).then(response => {
        this.progress = -1;
        console.log('上传成功');
      });
    }
  }
};
</script>

<style>
.dragover {
  border: 2px dashed #42b983;
  background-color: rgba(66, 185, 131, 0.1);
}
</style>

第三方库集成

对于更复杂的需求，可以集成专门的Vue文件上传组件库，如vue-upload-component或v-uploader。这些库提供了更多开箱即用的功能，如分块上传、自动重试等。

安装vue-upload-component示例：

npm install vue-upload-component

使用示例：

<template>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/api/upload"
    :multiple="true"
    @input-filter="inputFilter"
  >
    点击或拖拽文件到此处上传
  </file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';
export default {
  components: {
    FileUpload
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 限制文件类型
        if (!/\.(jpeg|jpg|png)$/i.test(newFile.name)) {
          return prevent();
        }
      }
    }
  }
};
</script>