<el-upload>怎么删除刚上传图片

`<el-upload>`是Element UI库中的一个组件，它通常用于文件上传功能。如果你想在用户刚刚上传完图片后就立即删除，你可以利用`on-success`事件处理函数。在这个函数里，你可以获取到上传成功的文件信息，并通过`remove()`方法来删除它。这是一个简单的示例：

<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中自定义上传文件列表项的显示。这样就可以去掉右上角的勾号了。

例如：

<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`，通过配置不同的事件方法来实现上传、预览、移除等功能。