zoukankan      html  css  js  c++  java
  • 本地下载文件的方法(兼容下载图片和视频)

        function downloadFile(url, filename) {
          /**
           * 原因是由于图片类文件无法直接下载
        * 下载文件
        * 原理:通过获取文件内容转译为二进制,传给创建a标签下载
        * @param url  文件地址url
        * @param filename 下载保存的名字
        */
          var downloadFileBya = function (fileName, content) {
            var aLink = document.createElement('a');
            var blob = new Blob([content]);
            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", true, true);
            if (fileName) {
              aLink.download = fileName;
            }
            aLink.target = "_blank";
            aLink.href = URL.createObjectURL(blob);
            // 自定义触发事件
            aLink.dispatchEvent(evt);
          }
          // 拿文件的名字
          var fileNameFromHeader = function (disposition) {
            if (disposition) {
              // 正则取值'/'前面的数值
              // 这里应该根据具体得的场景来取值
              let index = disposition.lastIndexOf("/");
              return decodeURIComponent(disposition.substring(index + 1, disposition.length));
            }
            return "undefine_file";
          }
    
          var xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.responseType = "blob";
          xhr.open('GET', url, true);
          xhr.onload = function () {
            if (this.status == 200) {
              // var blob = this.response;
              var donwloadName = filename != undefined ? filename : fileNameFromHeader(xhr.responseURL);
              downloadFileBya(donwloadName, xhr.response);
            } else {
              console.error("请求下载文件错误,请求错误码:" + this.status);
              return false;
            }
          }
          xhr.send();
        }
    

    如果是普通的文件本地需要下载直接调用window.open()这个方法

    如果是文件上传(并且对参数有一定的要求要formData形式的,如下类似的操作即可)

     1      // 导入Excel
     2     onchangeSuccess(event) {
     3       const file = event.target.files[0];
     4       console.log(file)
     5       const formData = new FormData();
     6       formData.append("file", file);
     7       const option = formData;
     8       headPlayGetUpload(option, this.fileId).then( res =>{
     9         console.log(res, '导入Excel')
    10         if (res.code == 200) {
    11            this.$message({
    12           type:'success',
    13           message:'导入成功'
    14         })
    15         this.fileId = res.result.fileId;
    16         }
    17       })   
    18     },
  • 相关阅读:
    BZOJ2565:最长双回文串
    BZOJ2342:[SHOI2011]双倍回文
    Redis数据库基础操作
    Celery异步任务框架
    Django框架之缓存数据库
    drf 分页器组件
    drf jwt认证组件
    drf三大认证组件
    Django框架之RBAC+ContentType
    Django框架之admin管理后台
  • 原文地址:https://www.cnblogs.com/lujunan/p/12362901.html
Copyright © 2011-2022 走看看