VUe+Element.UI+Form-Data 自定义文件上传指南

2024-02-07 20:52:20

1. 引入依赖

首先，您需要在项目中引入 Vue 和 Element.UI 依赖。

npm install vue element-ui

2. 配置上传组件

在 Vue 组件中，使用 Element.UI 的 el-upload 组件来实现文件上传。

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :data="formData"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button>点击上传</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue'
import { ElUpload } from 'element-ui'

export default {
  components: { ElUpload },
  setup() {
    const uploadUrl = 'http://example.com/upload'
    const formData = ref({})

    const handleSuccess = (response) => {
      console.log(response)
    }

    const handleError = (error) => {
      console.log(error)
    }

    return { uploadUrl, formData, handleSuccess, handleError }
  }
}
</script>

3. 设置 `formData`

在 data 属性中，您需要设置 formData 对象。这个对象包含要随文件一起发送的其他数据。

data() {
  return {
    formData: {
      name: 'John Doe',
      email: 'johndoe@example.com',
    },
  }
}

4. 处理上传成功和失败

您可以使用 on-success 和 on-error 属性来处理上传成功和失败事件。

methods: {
  handleSuccess(response) {
    console.log(response)
  },
  handleError(error) {
    console.log(error)
  },
}

5. 自定义上传请求头

如果需要自定义上传请求头，可以在 headers 属性中设置。

headers: {
  'Content-Type': 'multipart/form-data',
  'Authorization': 'Bearer <token>',
},

6. 设置上传文件大小限制

您可以使用 file-size-limit 属性来设置上传文件的大小限制。

file-size-limit: 1024 * 1024 * 2, // 2MB

7. 设置并发上传数

您可以使用 limit 属性来设置并发上传数。

limit: 3, // 最多同时上传 3 个文件

8. 设置自定义文件类型

您可以使用 accept 属性来设置自定义文件类型。

accept: '.jpg,.png,.gif',

9. 禁用拖拽上传

如果不需要拖拽上传，可以将 drag 属性设置为 false。

drag: false,

10. 使用示例代码

以下是一个完整的示例代码：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :data="formData"
    :headers="headers"
    :file-size-limit="fileSizeLimit"
    :limit="limit"
    :accept="accept"
    :drag="drag"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button>点击上传</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue'
import { ElUpload } from 'element-ui'

export default {
  components: { ElUpload },
  setup() {
    const uploadUrl = 'http://example.com/upload'
    const formData = ref({})
    const headers = {
      'Content-Type': 'multipart/form-data',
      'Authorization': 'Bearer <token>',
    }
    const fileSizeLimit = 1024 * 1024 * 2 // 2MB
    const limit = 3 // 最多同时上传 3 个文件
    const accept = '.jpg,.png,.gif'
    const drag = false

    const handleSuccess = (response) => {
      console.log(response)
    }

    const handleError = (error) => {
      console.log(error)
    }

    return { uploadUrl, formData, headers, fileSizeLimit, limit, accept, drag, handleSuccess, handleError }
  }
}
</script>