<el-upload>怎么删除刚上传图片
时间: 2024-09-14 14:11:51 浏览: 286
`<el-upload>`是Element UI库中的一个组件,它通常用于文件上传功能。如果你想在用户刚刚上传完图片后就立即删除,你可以利用`on-success`事件处理函数。在这个函数里,你可以获取到上传成功的文件信息,并通过`remove()`方法来删除它。这是一个简单的示例:
```html
<template>
<el-upload
action="your-api-url"
:on-success="handleSuccess"
>
<el-button slot="trigger">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(file, response) {
// 文件上传成功后删除
file.remove();
}
}
}
</script>
```
在这个例子中,当图片上传成功后,`file`对象会包含已上传文件的信息,调用`remove()`方法即可将其从服务器和本地存储中移除。
相关问题
<el-upload v-if="userType!=='stu'" accept=".png,.jpeg,.jpg" action :http-request="uploadPhoto" :file-list="fileImgList" :show-upload-list="false" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload>去除右上角的勾号
你可以在el-upload组件中添加一个slot属性为`file`,然后在这个slot中自定义上传文件列表项的显示。这样就可以去掉右上角的勾号了。
例如:
```html
<el-upload v-if="userType!=='stu'"
accept=".png,.jpeg,.jpg"
action
:http-request="uploadPhoto"
:file-list="fileImgList"
:show-upload-list="false"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
<template slot="file" slot-scope="{ file }">
<div class="el-upload-list__item-thumbnail">
<img :src="file.url" alt="" />
</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</template>
</el-upload>
```
在这里,我们通过添加一个`file` slot来自定义上传文件列表项的显示,其中包括一个放置图片缩略图的div和两个操作按钮:预览和删除。这样就可以去掉右上角的勾号了。
<el-upload v-model="foodForm.img" class="upload-demo" action="http://localhost:9999/food/upload" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleImageSuccess" :limit="1" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload_tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload>handleExceed(files,fileList){ this.$message.warning('当前限选一个文件') }, handleImageSuccess(res,file){ this.foodForm.img = res.data.url; }, beforeRemove(file,fileList){ return this.$confirm('确定移除该图片吗?'); }, handleRemove(file,fileList){ console.log(file,fileList); }, handlePreview(file){ window.open(file.response.url) console.log(file); },的原理
这段代码使用了element-ui中的上传组件`el-upload`,实现了上传图片的功能。具体原理如下:
1. `v-model="foodForm.img"`:将上传的图片绑定到`foodForm`对象的`img`属性中,即在上传成功后将返回的图片地址赋值给`foodForm.img`;
2. `class="upload-demo"`:为上传组件添加样式,可以自定义样式;
3. `action="http://localhost:9999/food/upload"`:指定上传图片的URL地址;
4. `:on-preview="handlePreview"`:配置图片预览事件方法,点击图片可预览图片;
5. `:on-remove="handleRemove"`:配置文件移除事件方法,移除文件时触发;
6. `:before-remove="beforeRemove"`:配置文件移除前的事件方法,可以在移除前进行确认;
7. `:on-success="handleImageSuccess"`:配置文件上传成功的事件方法,上传成功后触发;
8. `:limit="1"`:限制上传文件数量,此处限制为1个;
9. `:on-exceed="handleExceed"`:配置上传文件数量超出限制时的事件方法;
10. `:file-list="fileList"`:将上传的文件列表绑定到`fileList`属性中;
11. `handleExceed(files,fileList)`:上传文件数量超出限制时的处理函数,此处为弹出提示;
12. `handleImageSuccess(res,file)`:上传成功后的处理函数,将返回的图片地址赋值给`foodForm.img`;
13. `beforeRemove(file,fileList)`:移除文件前的处理函数,返回一个Promise对象,如果Promise的结果为false,则中止移除操作;
14. `handleRemove(file,fileList)`:移除文件后的处理函数,可以在这里添加自己的逻辑;
15. `handlePreview(file)`:预览文件的处理函数,此处将预览图片地址打开新窗口。
总的来说,这段代码使用了element-ui中的上传组件`el-upload`,通过配置不同的事件方法来实现上传、预览、移除等功能。
阅读全文
相关推荐

















