Vue3文件上传超详细教程，速速Get

2023-10-29 13:03:45

文件上传在Vue3中的指南

简介

在现代Web应用程序中，文件上传是一种至关重要的功能，可用于收集用户数据、存储用户文件和方便文件共享。本文旨在通过提供分步指南和涵盖常见场景的扩展功能来帮助你掌握Vue3中的文件上传。

实施文件上传

安装依赖

**```
npm install vue@3 axios v-uploader


### 创建上传组件

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

<script>
import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const file = ref(null)

    const handleFileChange = (e) => {
      file.value = e.target.files[0]
    }

    const handleUpload = () => {
      const formData = new FormData()
      formData.append('file', file.value)

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

    return {
      file,
      handleFileChange,
      handleUpload
    }
  }
}
</script>

使用上传组件

<template>
  <div>
    <file-uploader />
  </div>
</template>

<script>
import FileUploader from './components/FileUploader.vue'

export default {
  components: {
    FileUploader
  }
}
</script>

扩展功能

单文件上传

<input type="file" @change="handleFileChange">

多文件上传

<input type="file" multiple @change="handleFileChange">

文件类型限制

<input type="file" accept="image/*" @change="handleFileChange">

文件大小限制

<input type="file" max-size="1000000" @change="handleFileChange">

文件上传进度显示

使用v-uploader组件库：

<v-uploader
  :file="file"
  @progress="handleProgress"
  @success="handleSuccess"
  @error="handleError"
>
  <input type="file" @change="handleFileChange">
</v-uploader>

文件上传错误处理

<v-uploader
  :file="file"
  @progress="handleProgress"
  @success="handleSuccess"
  @error="handleError"
>
  <input type="file" @change="handleFileChange">
</v-uploader>