关于Element ui 中 Upload组件的beforeRemove方法


关于Element ui 中 Upload组件的beforeRemove方法使用
官网(https://element.eleme.cn/#/zh-CN/component/upload)的描述如下:
在这里插入图片描述
虽然有说明,但对第一次使用且对Promise不熟悉的小伙伴来说可能有些困难。
话不多说直接上代码:

beforeRemove(file){
      const p = new Promise((resolve,reject)=>{
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postDeletedFileLogic({
            fileId:file.id
          }).then(result=>{
            let res = result.data
            if(res.resultCode===200){
              this.$message({
                type:'success',
                message:res.message
              })
              resolve(true)
            }else{
              this.$message({
                type:'error',
                message:res.message
              })
              reject(false)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
          reject(false)
        });
      })
      return p
    },

注:作为个人的学习记录,代码写的不是很好,希望对你有所帮助。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
这段代码使用了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`,通过配置不同的事件方法来实现上传、预览、移除等功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值