custom-response你确定存在吗,我在开发手册上没找到
时间: 2024-02-13 20:01:46 浏览: 26
非常抱歉,我的回答有误。Element Plus 文件上传组件并没有提供 `custom-response` 属性。实现你的需求可以通过以下两种方式:
1. 在上传组件中使用 `on-success` 事件,将服务端返回的 `id` 放置在 `file` 对象上。例如:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file, fileList) {
const { id } = response.data; // 假设服务端返回的数据中有 id 字段
file.id = id; // 将服务端返回的 id 放置在 file 对象上
}
}
}
</script>
```
在上面的例子中,通过解构赋值获取服务端返回的 `id` 字段,然后将其放置在 `file` 对象上。这样就可以直接通过 `file.id` 访问服务端返回的 `id` 了。
2. 继承 `el-upload` 组件,重写 `handleProgress` 和 `handleSuccess` 方法,在这两个方法中将服务端返回的数据放置在 `file` 对象上。例如:
```html
<template>
<my-upload
class="upload-demo"
action="/upload"
>
<el-button size="small" type="primary">点击上传</el-button>
</my-upload>
</template>
<script>
import ElUpload from 'element-plus/lib/el-upload';
export default {
components: {
MyUpload: {
extends: ElUpload,
methods: {
handleProgress(event, file, fileList) {
// 调用父类方法
this.$emit('progress', event, file, fileList);
// 将服务端返回的 progress 字段放置在 file 对象上
const { progress } = JSON.parse(event.currentTarget.responseText);
file.progress = progress;
},
handleSuccess(response, file, fileList) {
// 调用父类方法
this.$emit('success', response, file, fileList);
// 将服务端返回的 id 字段放置在 file 对象上
const { id } = response.data;
file.id = id;
}
}
}
}
}
</script>
```
在上面的例子中,继承了 `el-upload` 组件,并重写了 `handleProgress` 和 `handleSuccess` 方法,在这两个方法中将服务端返回的数据放置在 `file` 对象上。然后在模板中使用自定义的 `my-upload` 组件。
希望这些解决方案能够帮助到你,如果还有其他问题,请继续提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)