美文网首页
vue-simple-uploader简单的分享

vue-simple-uploader简单的分享

作者: inyourface | 来源:发表于2021-10-21 16:14 被阅读0次

前言

百度上有很多vue-simple-uploader的使用说明,我就不说了。我只说下我所需要的功能。
一、先说下项目需求
(1)前端页面要批量上传数据
(2)数据大小不定,M、G、T,这是上传数据的大小范围
(3)重点来了,后端要求在上传之前,为每一条数据上传的时候携带一些需要的参数。例如:文件名、路径、session_id、文件权限等。
(4)暂时没有断点续传、切片等其他功能
二、遇到的问题
通过阅读simple-uploader文档、百度、Google等搜到的都是vue-simple-uploader的事件、方法、配置等使用方法。直接把所有的事件进行实现打印查看。并不能实现后端的要求。
三、解决过程
(1)公司大佬带着开始读simple-uploader的源码,重写方法都试了,还是不行。
(2)再次仔细的阅读了simple-uploader文档,发现配置项中一个字段query,它的描述是query 其他额外的参数,这个可以是一个对象或者是一个函数,如果是函数的话,则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式,默认为 {}。。这感觉很容易忽略过去。。。
(3)query可以是一个对象,然后就在里面写上自己需要的字段,重新上传文件,在每个put中发现都有query添加的字段。但是不能根据文件的不同来改变字段的值。
(4)query描述中也说到可以是一个函数,然后就写成函数,然后进行测试,发现可以改变字段的值。选择文件之后,函数的第一个参数就是当前文件的信息,进行上传文件之后,put中,每个消息都是当前文件的字段。完成后端要求。
下面就是我的options配置:

 options:{
        target: '/filesystem/api/rest/v1/main_file/put',
        testChunks: false,
        fileParameterName: "put_main_file",
        query:  function(file, res, status) {
            return {
              "session_id": window.main.$store.state.userInfo.session_id,
              "file_type": window.main.$store.state.filesManage.file_type,
              "file_name": file.name,
              "file_path": "/" +file.relativePath.substr(0, file.relativePath.lastIndexOf("/")),
              }
        }

(5)put每个文件给后端的字段,字段根据自己需求可变

image.png

相关文章

  • vue-simple-uploader简单的分享

    前言 百度上有很多vue-simple-uploader的使用说明,我就不说了。我只说下我所需要的功能。一、先说下...

  • vue-simple-uploader组件的一些使用心得

    前言 因为项目需要上传大文件,考虑使用分片上传、断点续传这些功能故选用vue-simple-uploader,期间...

  • vue-simple-uploader组件的使用感受

    题记:(可直接跳过)我刚实习的时候,就接手了一个任务:重写项目中前端文件上传功能,因为需要支持文件夹上传这个功能点...

  • 简单分享

    好多年了,你一直在我的伤口中幽居,我放下过天地,却从未放下过你,我生命中的千山万水,任你一一告别。

  • 简单分享!

    今天给自己放假了,追了部剧《我们都要好好的》不知为啥,看了就想继续看,感受到的就是看剧就像想要自己也有这种境遇,爱...

  • 日精进;——176天!

    系统 系统 系统 开会 开会 开会 分享 分享 分享 简单 简单 简单 智慧 智慧 智慧 复习 复习 复习全员发 ...

  • 最简单的分享

    今天是开福分会成立即将半周岁的铁杆书友答谢会,我们选择了一个让所有人为之一怔的精致别墅区,给大家准备了一点...

  • 简单的分享首歌

    这次我想说的歌曲是 由英国新生代歌手Ed Sheeran 2017年新专辑《÷ (Deluxe)》中的第5首,...

  • 做个简单的分享

    恭喜都读下来啦

  • 分享简单的快乐

    对于花痴而言,每一次买到的鲜花,都会带来一段快乐时光的心流。 前两周,买了一大捆“干枝杜鹃”,分别插在家里和办公室...

网友评论

      本文标题:vue-simple-uploader简单的分享

      本文链接:https://www.haomeiwen.com/subject/bmwfaltx.html