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

在 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-uploadaction="/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方法中，可以处理上传成功和失败的情况。