axios上传多个文件vue3 文件上传 vue

转载

轩辕 2023-11-10 06:56:24

文章标签 axios上传多个文件vue3 vue.js javascript ui 上传 文章分类 iOS 移动开发

Element-UI是一个基于Vue.js的组件库，提供了丰富的UI组件。其中，包括了文件上传组件，可以很方便地实现文件上传的功能。但是，当需要上传大文件时，一般需要分片上传，这时候需要通过一些特定的方式来实现。本文将详细介绍如何在Vue和Element-UI中实现大文件上传。

实现流程

安装依赖包
在Vue项目中使用Element-UI需要先安装Element-UI和axios依赖。

npm install element-ui axios --save

引入Element-UI组件
在Vue项目中，需要在入口文件main.js中引入Element-UI组件库。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

创建上传组件
在Vue中，可以通过创建一个组件来实现文件的上传。在组件中，需要定义文件上传的方法，并将上传组件绑定到input元素上。

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

<script>
export default {
  methods: {
    uploadFile() {
      const file = this.$refs.file.files[0]
      const formData = new FormData()
      formData.append('file', file)

      // 使用axios发送请求，上传文件
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

在上述代码中，我们使用了axios来发送Ajax请求，同时将文件信息以formData的形式发送给后端。

实现分片上传
当需要上传大文件时，需要将文件进行分片，然后逐个上传。我们可以通过创建一个方法来实现文件的分片上传。

function uploadChunk(file, chunkIndex) {
  const chunkSize = 1024 * 1024 // 每个分片的大小为1MB
  const start = chunkIndex * chunkSize
  const end = start + chunkSize
  const chunk = file.slice(start, end)
  const formData = new FormData()
  formData.append('chunk', chunk)
  formData.append('chunkIndex', chunkIndex)
  formData.append('totalChunks', Math.ceil(file.size / chunkSize))
  formData.append('filename', file.name)

  // 使用axios发送请求，上传文件分片
  return axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

在上述代码中，我们使用了File API中的slice方法将文件切片，然后将每个分片封装到FormData对象中，最后使用axios发送Ajax请求上传分片。

实现并发上传
当需要上传大文件时，将文件进行分片后，可能需要并发上传多个分片。我们可以通过Promise.all方法来实现并发上传。

function uploadFile(file) {
  const chunkSize = 1024 * 1024 // 每个分片的大小为1MB
  const totalChunks = Math.ceil(file.size / chunkSize)
  const requests = []
  for (let i = 0; i < totalChunks; i++) {
    requests.push(uploadChunk(file, i))
  }
  return Promise.all(requests)
}

在上述代码中，我们将分片上传的方法封装到了uploadChunk函数中，并使用Promise.all方法来实现并发上传。

完整的上传组件
最后，我们将上述方法封装到一个Vue组件中，实现大文件的上传。

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

<script>
export default {
  methods: {
    async uploadFile() {
      const file = this.$refs.file.files[0]
      try {
        const res = await this.upload(file)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    uploadChunk(file, chunkIndex) {
      const chunkSize = 1024 * 1024 // 每个分片的大小为1MB
      const start = chunkIndex * chunkSize
      const end = start + chunkSize
      const chunk = file.slice(start, end)
      const formData = new FormData()
      formData.append('chunk', chunk)
      formData.append('chunkIndex', chunkIndex)
      formData.append('totalChunks', Math.ceil(file.size / chunkSize))
      formData.append('filename', file.name)
      return axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    },
    async upload(file) {
      const chunkSize = 1024 * 1024 // 每个分片的大小为1MB
      const totalChunks = Math.ceil(file.size / chunkSize)
      const requests = []
      for (let i = 0; i < totalChunks; i++) {
        requests.push(this.uploadChunk(file, i))
      }
      await Promise.all(requests)
      const formData = new FormData()
      formData.append('filename', file.name)
      return axios.post('/merge', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }
  }
}
</script>

在上述代码中，我们将文件上传和分片上传的逻辑封装到了upload和uploadChunk方法中，通过调用这两个方法来实现大文件的上传。