el-upload上传视频回显
时间: 2023-09-12 08:05:02 浏览: 173
使用element-ui的upload组件实现上传图片和pdf可查看方法
要实现el-upload组件上传视频后的回显,你可以按照以下步骤进行操作:
1. 首先,在你的Vue组件中引入el-upload组件,确保已经正确安装了element-ui库。
2. 在data中定义一个变量来存储上传成功后的视频地址,例如videoUrl。
```javascript
data() {
return {
videoUrl: ''
}
}
```
3. 在el-upload组件中设置action属性为上传视频的后端接口地址,并将response-format属性设置为'json',以便接收服务器返回的数据。
```html
<el-upload
action="/api/uploadVideo"
response-format="json"
:on-success="handleSuccess"
>
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
```
4. 在methods中定义handleSuccess方法来处理上传成功的回调事件。该方法会接收到服务器返回的数据,你可以从中获取视频的地址,并将其赋值给videoUrl变量。
```javascript
methods: {
handleSuccess(response, file, fileList) {
// 从response中获取视频的地址
this.videoUrl = response.data.url;
}
}
```
5. 最后,你就可以在页面上使用video标签来显示上传成功的视频了。
```html
<video :src="videoUrl" controls></video>
```
这样,当用户选择并上传视频后,视频会显示在页面上。
请注意替换相应的后端接口地址和响应数据字段以适应你的实际情况。希望对你有帮助!
阅读全文