本地下載文件的方法(兼容下載圖片和視頻)


    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     },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM