el-upload怎么在action向后端发送请求时添加请求参数
时间: 2023-11-26 21:07:19 浏览: 31
要在 `el-upload` 组件的 `action` 属性中添加请求参数,可以使用 `before-upload` 属性来自定义上传前的行为,在该函数中可以修改上传请求的参数。
例如,如果要在上传文件时附带一个名为 `token` 的请求参数,可以这样写:
```html
<el-upload
:action="uploadUrl"
:before-upload="beforeUpload"
>
<!-- ... -->
</el-upload>
```
```javascript
methods: {
beforeUpload(file) {
// 在上传请求中添加 token 参数
this.uploadUrl = '/api/upload?token=' + getToken()
}
}
```
在 `before-upload` 函数中,可以修改 `uploadUrl` 变量来添加请求参数。注意,如果 `uploadUrl` 是一个常量,需要先将其复制到一个可修改的变量中再修改,否则会导致警告:`Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.`。
相关问题
el-upload上传文件到后端
el-upload标签是elementUI中的上传控件,用于将文件上传到后端。在前端代码中,可以看到el-upload标签的属性中有一个action属性,该属性指定了文件上传的后端路径。在\[1\]中,action属性的值为后端上传路径,而在\[2\]中,action属性的值为"#",表示上传的请求将发送到当前页面。在\[3\]中,action属性的值为"https://jsonplaceholder.typicode.com/posts/",表示上传的请求将发送到该URL。因此,el-upload标签的action属性可以根据具体的需求设置为相应的后端上传路径。
#### 引用[.reference_title]
- *1* [使用el-upload上传单文件多文件前后端实现](https://blog.csdn.net/qq_43780761/article/details/126564877)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [前端文件上传及后端接收(el-upload标签的使用)](https://blog.csdn.net/Hsssc/article/details/109067378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue el-upload实现上传文件到后台的功能](https://blog.csdn.net/qq_42345108/article/details/102824501)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
el-upload怎么使用外部方法来请求后端路径,而不用写在el-upload的action里面
你可以使用 `before-upload` 属性来在上传之前触发一个方法,然后在这个方法里面使用 `axios` 或者其他方式来发起请求获取后端路径,最后将路径赋值给 `action` 属性即可。
以下是一个示例代码:
```vue
<template>
<el-upload
class="upload-demo"
:action="uploadUrl"
:before-upload="beforeUpload"
:on-success="onUploadSuccess"
:on-error="onUploadError"
:auto-upload="false"
:file-list="fileList"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
uploadUrl: '',
fileList: []
}
},
methods: {
beforeUpload(file) {
return new Promise((resolve, reject) => {
// 发起请求获取后端路径
axios.get('/api/uploadUrl').then(res => {
this.uploadUrl = res.data.uploadUrl
resolve(file)
}).catch(error => {
reject(error)
})
})
},
onUploadSuccess(response, file, fileList) {
this.$message.success('上传成功')
},
onUploadError(error, file, fileList) {
this.$message.error('上传失败')
},
submitUpload() {
this.$refs.upload.submit()
}
}
}
</script>
```
在这个示例中,我们使用了 `before-upload` 属性来触发一个方法 `beforeUpload`,在这个方法里面发起了一个请求来获取后端路径,并将路径赋值给 `uploadUrl` 变量。最后,我们将 `uploadUrl` 变量作为 `action` 属性的值传递给 `el-upload` 组件。
这样就实现了在不写死上传路径的情况下,通过外部方法获取后端路径的目的。