vue实现文档导入

Vue 实现文档导入的方法

在 Vue 中实现文档导入功能通常涉及文件上传、文件解析和后端交互。以下是几种常见的实现方式：

使用原生 input 元素

通过 HTML 原生 <input type="file"> 元素实现文件选择：

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

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

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

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

<template>
  <vue-dropzone
    ref="myVueDropzone"
    id="dropzone"
    :options="dropzoneOptions"
    @vdropzone-file-added="fileAdded"
  ></vue-dropzone>
</template>

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

export default {
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: 'https://example.com/upload',
        thumbnailWidth: 150,
        maxFilesize: 10
      }
    }
  },
  methods: {
    fileAdded(file) {
      console.log(file)
    }
  }
}
</script>

解析 Excel 文件（使用 xlsx）

如果需要导入 Excel 文件并解析数据，可以使用 xlsx 库：

<template>
  <input type="file" @change="handleExcelUpload" accept=".xlsx, .xls" />
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  methods: {
    handleExcelUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = e => {
        const data = new Uint8Array(e.target.result)
        const workbook = XLSX.read(data, { type: 'array' })
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
        const jsonData = XLSX.utils.sheet_to_json(firstSheet)
        console.log(jsonData)
      }
      reader.readAsArrayBuffer(file)
    }
  }
}
</script>

上传到服务器

将文件上传到服务器通常需要使用 FormData：

methods: {
  uploadFile(file) {
    const formData = new FormData()
    formData.append('file', file)

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

显示上传进度

可以使用 axios 的 onUploadProgress 显示上传进度：

methods: {
  uploadFile(file) {
    const formData = new FormData()
    formData.append('file', file)

    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: progressEvent => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
        console.log(percentCompleted)
      }
    }).then(response => {
      console.log(response.data)
    })
  }
}

文件类型验证

在上传前验证文件类型：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    const allowedTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']

    if (!allowedTypes.includes(file.type)) {
      alert('请上传Excel文件')
      return
    }

    // 处理文件
  }
}

以上方法可以根据具体需求组合使用，实现完整的文档导入功能。