采用原生写法下载,这里下载的支持多文件集合,即最后下载时为zip压缩包文件。

这里说明下 layer和layui等写法,是引入了layui组件开发的,
下面方法实际功能可移除,只是作为加载样式!

 一、原生的xhr的方式去下载文件,具体写法如下,不懂的评论区直接问我!

// loading弹窗的位置样式  
#fileLoading.layui-layer-content {
      white-space: nowrap;
      top: 23px;
      text-indent: -6em;
      line-height: 50px;
      color: white;
    }

         let postDownload = function (url, ids) {
                  // -----------------------这个是loading可以删除
                   var loadIndex = layer.load(2, {
                    id: "fileLoading",
                    content: "文件下载中,请耐心等待!",
                    shade: [0.5, "#000"],
                    scrollbar: false,
                  });
                 // -----------------------这个是loading可以删除
                  var xhr = new XMLHttpRequest();
                  xhr.open("POST", url, true); // 也可用POST方式
                  xhr.setRequestHeader("Content-Type", "application/json");
                  xhr.responseType = "blob";
                  xhr.onload = function () {
                    console.log("this.response", this.response);
                    if (this.status === 200) {
                      var blob = this.response;
                      var reader = new FileReader();
                      reader.readAsDataURL(blob);
                      reader.onload = function (e) {
                        var a = document.createElement("a");
                        a.download = "压缩包" + Date.now() + ".zip";
                        a.href = e.target.result;
                        $("body").append(a); // 修复firefox中无法触发click
                        a.click();
                        $(a).remove();
                      };
                      let timer = setTimeout(() => {
                        layer.close(loadIndex);
                        clearTimeout(timer);
                      }, 1500);
                    }
                  };
                  xhr.send(JSON.stringify({ ids }));
                };


        let getDownload = function (url) {
                    // -----------------------这个是loading可以删除
                   var loadIndex = layer.load(2, {
                    id: "fileLoading",
                    content: "文件下载中,请耐心等待!",
                    shade: [0.5, "#000"],
                    scrollbar: false,
                  });
                  // -----------------------这个是loading可以删除
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', url, true);    // 也可用POST方式
                    xhr.responseType = "blob";
                    xhr.onload = function () {
                      console.log('this.response', this.response);
                      if (this.status === 200) {
                        var blob = this.response;
                        var reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onload = function (e) {
                          var a = document.createElement('a');
                          a.download = '压缩包' + Date.now() + ".zip";
                          a.href = e.target.result;
                          $("body").append(a);    // 修复firefox中无法触发click
                          a.click();
                          $(a).remove();
                        };
                        let timer = setTimeout(() => {
                          layer.close(loadIndex)
                          clearTimeout(timer)
                        }, 1500)
                      }
                    };
                    xhr.send()
                  };

  // 调用方式如下: get的方式文件id直接拼在了路径url上
  let url = base_url + "/file/downloadZip/" + uuidList;
  getDownload(url)
  // post的方式下载,入参的方式是通过xhr.send的方式去传的
  let url = base_url + "/TechnicalManage/downloadTechnicalZip";
  postDownload(url, uuidList);

二、采用ajax的方式去上传文件的写法

// ... do something.
采用layui的uploader组件:choose中处理好参数相关的东西,最后直接采用ajax方式调用

let submitData ;
          var uploadListIns = upload.render({
            elem:'#uploadAttachments'
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,choose: function(obj){   
              var that = this;
              var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
              var form = new FormData()
              for (let i in files) {
                  form.append('file',files[i])
                  //删除文件队列已经上传成功的文件,防止下次获取时先前文件还存在
                  delete this.files[i]; 
              }
              form.append("uuid", '883ded-eerer-e3-d-dfd334')
              submitData = form
              asyncUploadAJAX(); // ajax方法调文件上传接口,如下
            }
          });

AJAX直接调用上传接口:

关键属性设置:
 contentType: false,//这里一定设置为false
 processData: false,//这两个一定设置为false
    async function asyncUploadAJAX() {
            $.ajax({
                url:  base_url + 'xxx',
                type: "POST",
                data:submitData, // formData类型
                contentType: false,//这里一定设置为false
                processData: false,//这两个一定设置为false
                success: function (data) {
                 if(data && data.code == "200"){
                   layer.msg("上传成功!", { time: 500 }, function () {layer.closeAll()});
                 }else {
                  layer.msg(data.message, { icon: 2,time: 500 }, function () {layer.close(loadIndex)})
                 } 
                }
              })
          }

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐