vue-simple-uploader简单的分享

前言

百度上有很多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