el-form如何清空上传的图片
时间: 2024-01-11 17:06:05 浏览: 76
要清空el-form中上传的图片,你可以使用以下方法:
1. 在el-form中使用el-upload组件来处理图片上传。首先,确保你的el-upload组件绑定了一个变量,用于存储上传成功的图片地址。
```html
<el-upload
action="/your-upload-url"
:on-success="handleSuccess"
:file-list="fileList"
>
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
```
2. 在data中定义一个fileList变量来存储上传成功的图片地址:
```javascript
data() {
return {
fileList: []
}
}
```
3. 在methods中定义handleSuccess方法,该方法会在上传成功后被调用,将上传成功的图片地址保存到fileList中:
```javascript
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后,将图片地址保存到fileList中
this.fileList = fileList.map(item => item.url);
}
}
```
4. 若要清空上传的图片,只需将fileList清空即可:
```javascript
methods: {
clearFileList() {
this.fileList = [];
}
}
```
这样,当你调用`clearFileList`方法时,el-form中上传的图片就会被清空了。
阅读全文
相关推荐













