element-ui upload 上传组件中on-success 声明方法不生效问题

最近在学习vue 2,实现element-ui 框架中upload 上传文件组件碰到的一些坑:

1.上传文件成功后on-success 声明的方法不执行。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

官方模板是上面代码,但是我是实现自定义上传文件,禁用了action实现方式,添加

:auto-upload="false" ,然后实现:http-request="submitUpload",具体的调用上传文件接口在submitUpload方法中实现,但是这种方式调用成功后on-success 方法就不执行,改用官方默认的方式就能正常执行on-success 块中的代码

最后结论:应该是禁用了action 调用接口,实现自定义的http-request 实现,以至于on-success 在接口成功之后没有触发,这是自己试验后的结论,自己百度找不到具体的原因,也不知道是否准确。

下面是on-success方法不触发代码:

<el-upload class="" ref="upload" action=""
      name="file" :on-preview="handlePreview" :file-list="fileList"
      :on-success="uploadSuccess" :auto-upload="false"
      :on-change="uploadChange"  :http-request="submitUpload">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>





uploadSuccess(response, file, fileList) {
   console.log(response );
},
submitUpload(){  //执行上传图片
      this.axios({
        method: 'post',
        url: 'http://localhost:8090/uploadFile',
        data:  this.fileData,
        timeout: 4000
        // withCredentials: true
      }).then((response) => {
        //如果一定要实现on-success声明的方法只能这里显示的调用uploadSuccess方法
        this.uploadSuccess(response);
      })

},

在上一篇笔记,我们分析了 `upload` 组件内部的 `request` 方法,接下来我们继续分析 `upload` 组件的另一个核心方法——`handleChange`。 ## handleChange `handleChange` 方法是 `upload` 组件内部监听 `change` 事件的回调函数。当用户选择文件后,该方法会被调用。 ```javascript handleChange(ev) { const { target } = ev; const { fileList } = this; // 根据上传文件的状态,更新 fileList 对应文件的状态 const files = toArray(target.files); this.uploadFiles(files); target.value = ''; }, ``` 首先,我们通过事件对象获取到当前用户选择的文件列表。接下来,调用了 `uploadFiles` 方法,将选择的文件列表作为参数传入,用于处理文件上传操作。 最后,我们将 input 元素的值重置为空,以便用户下一次可以选择同一个文件进行上传。 ## uploadFiles `uploadFiles` 方法是 `handleChange` 方法的内部方法,用于处理上传文件的具体操作。 ```javascript uploadFiles(files) { const postFiles = Array.prototype.slice.call(files); const remainCount = this.limit - this.fileList.length; const canPostFiles = postFiles.slice(0, remainCount); canPostFiles.forEach(file => { this.upload(file); }); }, ``` 首先,将选择的文件列表转换成数组 `postFiles`。接着,我们计算出还可以上传的文件数量,并从 `postFiles` 数组截取出可上传文件的子数组 `canPostFiles`。 最后,我们遍历 `canPostFiles` 数组,分别调用 `upload` 方法上传每个文件。 ## upload `upload` 方法是 `uploadFiles` 方法的内部方法,用于处理单个文件的上传操作。 ```javascript upload(rawFile, file) { const { onPreview } = this.$listeners; if (!this.beforeUpload) { return this.post(rawFile); } const before = this.beforeUpload(rawFile); if (before && before.then) { before.then(processedFile => { if (Object.prototype.toString.call(processedFile) === '[object File]') { this.post(processedFile); } else { this.post(rawFile); } }, () => { this.abort(rawFile, file); }); } else if (before !== false) { this.post(before); } else { this.abort(rawFile, file); } if (onPreview) onPreview(file || rawFile); }, ``` 首先,我们判断是否存在 `beforeUpload` 属性。如果不存在,直接调用 `post` 方法上传文件。 如果存在 `beforeUpload` 属性,调用 `beforeUpload` 方法并传入当前待上传的文件 `rawFile` 作为参数。如果 `beforeUpload` 返回一个 Promise 对象,我们需要等待 Promise 的 resolve 后再进行具体的上传操作。 如果 `beforeUpload` 返回一个 `File` 对象,说明已经对待上传的文件进行了加工处理,我们需要使用修改后的文件进行上传操作。否则,我们使用原始的 `rawFile` 进行上传。 如果 `beforeUpload` 返回 false,说明不允许上传当前的文件,我们需要调用 `abort` 方法上传操作。 最后,我们触发 `onPreview` 事件,用于预览文件。 到这里,我们已经分析了 `upload` 组件内部的两个核心方法 `handleChange` 和 `uploadFiles`,以及 `upload` 方法的具体实现。在下一篇笔记,我们将继续分析 `upload` 组件的其他方法
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值