美文网首页
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简单的分享

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