vue3中el-upload使用http-request方式自定义上传文件

JackieDYH

于 2025-08-12 09:51:23 发布

阅读量272

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： http 网络协议网络 el-upload

本文链接：https://blog.csdn.net/JackieDYH/article/details/131659888

Vue 专栏收录该内容

376 篇文章

订阅专栏

在 Vue3 中使用 el-upload 组件时，可以通过 http-request 属性来自定义上传文件的方式。具体步骤如下：

安装依赖

npm install axios --save

在组件中引入 axios

import axios from 'axios'

在 el-upload 组件上设置 http-request 属性，指定上传文件的处理方式

<el-upload
  :action="uploadUrl"
  :http-request="uploadFile"
>

其中，uploadUrl 是上传文件的接口地址，uploadFile 是自定义的上传文件处理方法。

实现自定义的上传文件处理方法

methods: {
  uploadFile(file) {
    const formData = new FormData()
    formData.append('file', file)
    return axios.post(uploadUrl, formData).then(response => {
      console.log(response)
      // 处理上传成功后的逻辑
    }).catch(error => {
      console.log(error)
      // 处理上传失败后的逻辑
    })
  }
}

在上传文件的处理方法中，我们需要将文件保存到 FormData 中，并使用 axios 发送 POST 请求，将 FormData 作为请求的数据。上传成功后，会返回一个响应对象，我们可以在 then 方法中处理上传成功后的逻辑，如果上传失败，则会进入 catch 方法中进行处理。

完整代码示例：

<template>
  <el-upload
    :action="uploadUrl"
    :http-request="uploadFile"
  >
    <el-button slot="trigger">
      <i class="el-icon-upload"></i> 上传文件
    </el-button>
  </el-upload>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      uploadUrl: 'http://example.com/upload'
    }
  },
  methods: {
    uploadFile(file) {
      const formData = new FormData()
      formData.append('file', file)
      return axios.post(uploadUrl, formData).then(response => {
        console.log(response)
        // 处理上传成功后的逻辑
      }).catch(error => {
        console.log(error)
        // 处理上传失败后的逻辑
      })
    }
  }
}
</script>

在Vue3中，可以使用el-upload组件进行文件上传，但需要自定义http-request方法来实现上传功能。

下面是一个示例代码：

<template>
  <el-upload
    action="/upload"
    :http-request="uploadFile"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

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

export default {
  setup() {
    const uploadFile = (file) => {
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('file', file.raw);
        // 发送请求
        // 可以使用 axios 或者 fetch 发送 POST 请求来上传文件
        // 下面使用 fetch 举例
        fetch('/api/upload', {
          method: 'POST',
          body: formData
        })
        .then(response => {
          resolve()
        })
        .catch(error => {
          reject(error)
        })
      })
    }

    const handleSuccess = (response, file, fileList) => {
      console.log('上传成功', response);
    }

    const handleError = (error, file, fileList) => {
      console.log('上传失败', error);
    }

    return {
      uploadFile,
      handleSuccess,
      handleError
    }
  }
};
</script>

在http-request方法中，通过FormData对象将文件数据传递到后台，然后使用fetch或者axios等库来发送POST请求上传文件。如果上传成功，调用resolve方法并将响应数据作为参数传递给它，如果失败则调用reject方法将错误信息作为参数传递给它。在on-success和on-error方法中，可以处理上传成功和失败的情况。