6-4 ElementUI中的upload实现 await 问题解决方式 filter() 方法 ]

最新推荐文章于 2024-04-03 15:18:19 发布

原创最新推荐文章于 2024-04-03 15:18:19 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文探讨了在Vue中使用ElementUI的upload组件进行文件上传的实践，展示了如何利用axios和FormData对象自定义上传路径。同时，深入解析了JavaScript中Array的filter()方法在项目中的高效应用，以实现数组过滤。

开发交付工具项目

1.在使用hui的时候遇到了很多坑，文档说明不全，示例太少等问题都存在。有些东西除了看原文档，也得自己研究下

Vue上传文件：ElementUI中的upload实现

实际上这个upload组件是通过formData对象跟服务端交互的，所以我们自己手写方法进行上传也是一样的道理，甚至可以自定义每次上传的路径都不同

  let fd = new FormData();
    fd.append('file',file);//传文件
    fd.append('srid',this.aqForm.srid);//传其他参数
    axios.post('/api/up/file',fd).then(function(res){
            alert('成功');
    })

2.await is a reserved word 问题解决方式
如果有回调函数的话，或者函数下嵌套子函数，得把await和async放在同一层，这样才能成功调用
这里async和await是成对出现的

  success: async (status, data, xhr) => {
          this.$msgbox({
            title: "推送成功",
            type: "success",
            message: ""
          });
          await this.setUploadPath(data.id);
          await this.$refs.upload.submit();
          await this.refreshData();
        },

3.JavaScript Array filter() 方法

在项目里常常会有过滤一个数组得到所需的数组的情况，虽然基本数组操作使用map()方法然后自己操作下return的值也能实现，但是使用封装好的数组操作方法无疑会更快。

 //服务端用的只有id的对象占位，这里取的话 要先过滤掉空的 再显示
      if (this.editRowData.attachInfo) {
        this.fileList = this.editRowData.attachInfo.filter((item, index) => {
          return item.name;
        });
      }

这里的操作是过滤到item.name不存在的数组项