下载

a

axios设置响应类型，获取blob、filename，1.创建a标签下载，销毁a标签 2.IE浏览器下载

axios({
  method:'...',
  url:'...',
  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json','text', 'stream'
  responseType:'blob'
}).then(res => {
    const {headers, data} = res,
    // 从响应头中获取文件名，*如果network中能看到content-disposition，代码无法获取，需后端配置
    filename = decodeURI(headers["content-disposition"].split("filename=")[1]),
    blob = new Blob([data], {type: headers["content-type"]});
    saveAs(blob, filename)
})

// 保存到本地
function saveAs(blob,filename) {
    if ('download' in document.createElement('a')) {
         const eleA = document.createElement('a');
         eleA.download = fileName
         eleA.style.display = 'none';
         eleA.href = URL.createObjectURL(blob);
         document.body.appendChild(eleA);
         eleA.click();
         URL.revokeObjectURL(eleA.href); //释放URL对象
         document.body.removeChild(eleA);
   } else {
       // IE下载
       navigator.msSaveOrOpenBlob(blob, filename)
   }
}

方法二

 $(".meeting-downloadTwo").click(function () {
          let query = {
            file_key: $(this).attr("file_key"),
            conf_key:  $(this).attr('key'),
          };
          axios({
            method: "get",
            url: "http://192.168.1.231:55553/api/1/meeting/file/down",
            params: query,
            headers: {
              "CONFERENCE-AUTH-TOKEN": sessionStorage.getItem("TOKEN"),
              "CONFERENCE-AUTH-RANDOM": sessionStorage.getItem("RANDOMTOKEN"),
              "Content-Type": "multipart/form-data",
            },
            responseType: "blob", // 转为二进制流 重点
          }).then((res) => {
            const {headers, data} = res
            let  filename = $(this).attr('file_name')
            console.log(filename,"filename");
            blob = new Blob([data], {type: headers["content-type"]});
            saveAs(blob, filename)
          });
        });
        function saveAs(blob,filename) {
          if ('download' in document.createElement('a')) {
               const eleA = document.createElement('a');
               eleA.download = filename
               eleA.style.display = 'none';
               eleA.href = URL.createObjectURL(blob);
               document.body.appendChild(eleA);
               eleA.click();
               URL.revokeObjectURL(eleA.href); //释放URL对象
               document.body.removeChild(eleA);
         } else {
             // IE下载
             navigator.msSaveOrOpenBlob(blob, filename)
         }
      }

上传

上传file文件都需要转formData

let formData = new FormData();

formData.append("file", my_file);

<input type="file" class="add-access_material" name="myfile" id='material_file' />

分段上传

$("#file").change(function () {
  let upload = function (file, skip, id) {
    let formData = new FormData(); //初始化一个FormData对象

    let blockSize = 1024 * 1024; //每块的大小

    let nextSize = Math.min((skip + 1) * blockSize, file.size); //读取到结束位置

    let fileData = file.slice(skip * blockSize, nextSize); //截取 部分文件 块

    console.log(skip * blockSize, nextSize);
    formData.append("_id", id);
    formData.append("category_id", 1);
    formData.append("filesize", file.size);
    formData.append("filename", file.name); //保存文件名字

    formData.append("file", fileData); //将 部分文件 塞入FormData

    $.ajax({
      url: BASE.base + CONFIGURL["UPLOAD"],
      type: "POST",
      headers: {
        "CONFERENCE-AUTH-TOKEN": sessionStorage.getItem("TOKEN"),
        "CONFERENCE-AUTH-RANDOM": sessionStorage.getItem("RANDOMTOKEN")
      },
      data: formData,
      processData: false,
      // 告诉jQuery不要去处理发送的数据
      contentType: false,
      // 告诉jQuery不要去设置Content-Type请求头
      success: function (responseText) {
        console.log(responseText);

        if (responseText.code == 200) {
          console.log("已经上传了" + (skip + 1) + "块文件");

          if (file.size <= nextSize) {
            //如果上传完成，则跳出继续上传
            const data = responseText.data;
            message({
              title: "上传成功"
            });
            return;
          }

          upload(file, ++skip, id);
        } else {
          message({
            title: responseText.msg,
            info: "err"
          });
        }
      }
    });
  };

  let random = function (len) {
    len = len || 32;
    let $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1

    let maxPos = $chars.length;
    let pwd = "";

    for (i = 0; i < len; i++) {
      pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }

    return pwd;
  };
  let file = this.files[0];
  upload(file, 0, random());
});

普通上传

$("#file").change(function () {
  let my_file = this.files[0];
  let formData = new FormData();
  formData.append("file", my_file);
  let query = {
    file: my_file
  };
  window["$http"].upload(CONFIGURL["UPLOAD"], query, gather = {
    isToken: true
  }).then(res => {
    console.log(res, "上传");
    const {
      code,
      data
    } = res.data;

    if (code === 200) {
      message({
        title: "上传成功"
      });
    } else {
      message({
        title: res.data.msg,
        info: "err"
      });
    }
  });
});