关于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
    },

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

Element UI 提供了一个 Upload 组件用于上传文件,包括图片。你可以按照以下步骤来使用这个组件实现图片上传: 1. 在需要使用上传组件的页面中引入 `Upload` 组件: ``` <template> <div> <el-upload class="upload-demo" action="/upload" :headers="headers" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleSuccess" :on-error="handleError" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div> </el-upload> </div> </template> <script> export default { data() { return { headers: { Authorization: "Bearer " + localStorage.getItem("token") }, fileList: [] }; }, methods: { handlePreview(file) { console.log(file); }, handleRemove(file, fileList) { console.log(file, fileList); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); }, handleSuccess(response, file, fileList) { console.log(response, file, fileList); }, handleError(error, file, fileList) { console.log(error, file, fileList); } } }; </script> ``` 2. 在 `el-upload` 标签中设置 `action` 属性为上传图片的接口地址。如果你的图片上传接口需要携带 Token 等信息,可以在 `headers` 属性中设置请求头信息。 3. 可以设置一些其他属性,如 `on-preview`、`on-remove` 等,来对上传的文件进行预览、删除等操作。 4. 在 `data` 中定义一个 `fileList` 数组,用于存储上传的文件信息。 5. 在 `methods` 中定义一些方法,用于处理上传文件后的回调操作。例如,在 `handleSuccess` 方法中可以将上传成功后返回的图片地址存储到 `fileList` 数组中。 这样,你就可以使用 Element UIUpload 组件来实现图片上传了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值