el-upload里面的action
时间: 2023-08-25 10:17:49 浏览: 109
el-upload组件中的action属性用于指定文件上传的目标地址,即文件上传时要发送到的服务器端接口。action属性的值应该是一个字符串,表示服务器端接口的URL地址。
例如,你可以将action属性设置为一个接收文件上传请求的后端API的URL,如:
```
<el-upload action="/api/upload" ...></el-upload>
```
在这个例子中,当用户选择文件并点击上传按钮时,el-upload组件会将文件发送到`/api/upload`接口。你需要在后端编写对应的接口来处理文件上传请求。
相关问题
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` 组件。
这样就实现了在不写死上传路径的情况下,通过外部方法获取后端路径的目的。
el-upload before-upload修改action无效
您好,针对您的问题,可能是因为您在 before-upload 钩子函数中修改了 action,但是并没有生效。这可能是因为在 before-upload 中修改 action 并不会影响到上传组件的实际行为,因为上传组件在 before-upload 钩子函数执行之前已经确定了上传的地址。如果您需要动态修改上传地址,可以考虑使用 upload 方法的第二个参数,即 options 对象中的 action 属性来实现。
阅读全文