element-upload 中on-change提交数据多次触发问题如何解决

最新推荐文章于 2024-06-06 18:11:26 发布

李長庚

最新推荐文章于 2024-06-06 18:11:26 发布

阅读量2.1k

点赞数

文章标签：前端 vue.js 前端框架

本文链接：https://blog.csdn.net/xybhua/article/details/127824303

版权

这篇博客记录了在使用组件时遇到的on-change事件被多次调用的问题及解决方案。作者指出，on-change在上传成功和失败时都会触发，通过判断status为'ready'来确保仅在上传成功时执行相关代码，例如将文件数据发送到指定URL并更新文件列表。

摘要由CSDN通过智能技术生成

记录一下今天使用组件遇到的问题——多次调用on-change

因为他在点击上传和成功或者失败的时候都会调用，当是上传成功时，status===ready，所以在执行之前加一个判断就可以了，我的是成功上传时再执行，代码如下：

 if (e.status === 'ready'){
    const pddss = new FormData();
    pddss.append("img", e.raw, e.name);
    console.log(pddss);
    axios({
      method: 'post',
      url: "https://scienicpc.kuxia.top/pcapi/File/fileimg",
      data: pddss
    }).then(res => {
      console.log(res);
      fileList.value.push({ name: 'abc.png', url: "https://scienicpc.kuxia.top" + res.data.front_file })
      console.log(fileList);
      
    })
  }