vue实现文件功能

Vue 实现文件上传功能

使用 Vue 实现文件上传功能可以通过原生 HTML 的 <input type="file"> 结合 Vue 的事件处理和 HTTP 请求库（如 Axios）来实现。

HTML 部分

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

JavaScript 部分

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        return;
      }

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

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        alert('上传成功');
      })
      .catch(error => {
        alert('上传失败');
      });
    }
  }
};
</script>

Vue 实现文件下载功能

文件下载可以通过后端返回文件 URL 或 Blob 数据，前端通过创建 <a> 标签触发下载。

从 URL 下载

methods: {
  downloadFile(url, fileName) {
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName || 'download';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

从 Blob 数据下载

methods: {
  downloadBlob(blobData, fileName) {
    const url = window.URL.createObjectURL(blobData);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName || 'download';
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(link);
  }
}

Vue 实现文件预览功能

文件预览可以通过不同的方式实现，具体取决于文件类型。

图片预览

methods: {
  previewImage(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.imageUrl = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

PDF 预览 使用 PDF.js 或其他 PDF 预览库可以实现 PDF 文件的预览。

通用文件预览 对于无法直接预览的文件类型，可以调用浏览器的默认预览行为或使用第三方服务。

Vue 实现文件列表展示

展示上传的文件列表可以通过遍历文件数组来实现。

HTML 部分

<template>
  <div>
    <ul>
      <li v-for="(file, index) in files" :key="index">
        {{ file.name }} - {{ file.size }} bytes
        <button @click="downloadFile(file)">下载</button>
      </li>
    </ul>
  </div>
</template>

JavaScript 部分

data() {
  return {
    files: []
  };
},
methods: {
  addFiles(newFiles) {
    this.files = [...this.files, ...newFiles];
  },
  downloadFile(file) {
    // 实现下载逻辑
  }
}

Vue 实现文件拖拽上传

通过监听拖拽事件实现文件拖拽上传功能。

HTML 部分

<template>
  <div 
    @dragover.prevent="dragover"
    @dragleave.prevent="dragleave"
    @drop.prevent="drop"
    :class="{ 'dragging': isDragging }"
  >
    拖拽文件到此处上传
  </div>
</template>

JavaScript 部分

data() {
  return {
    isDragging: false
  };
},
methods: {
  dragover() {
    this.isDragging = true;
  },
  dragleave() {
    this.isDragging = false;
  },
  drop(event) {
    this.isDragging = false;
    const files = event.dataTransfer.files;
    this.handleFiles(files);
  },
  handleFiles(files) {
    // 处理上传文件
  }
}

使用第三方库实现文件功能

对于更复杂的需求，可以使用第三方库如 vue-dropzone、vue-upload-component 等。

安装 vue-dropzone

npm install vue2-dropzone

使用示例

import vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';

export default {
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: '/upload',
        thumbnailWidth: 150,
        maxFilesize: 10,
        headers: { 'Authorization': 'Bearer ' + this.token }
      }
    };
  }
};

HTML 部分

<template>
  <vue-dropzone
    id="dropzone"
    :options="dropzoneOptions"
    @vdropzone-success="uploadSuccess"
  ></vue-dropzone>
</template>

以上方法涵盖了 Vue 中实现文件上传、下载、预览和列表展示的基本功能，可以根据具体需求选择适合的实现方式。