js 上傳文件時對名稱進行重命名

最近在解決各種各樣的瀏覽器兼容問題，遇到一個文件上傳重命名的問題，就是在 IE上傳不支持 new File

查詢MDN （  https://developer.mozilla.org/zh-CN/docs/Web/API/File/File  ） 發現其是一個構造器 創建新的FILe 對象實例；

 

由於使用 input type="file" 獲取的文件  File對象的name屬性是只讀的，所以想對其重名， 就考錄根據input獲取的Fil對象構造一個一模一樣的新的FIle對象，並對其進行重名，所以采用的代碼為：

 

  var Newfile = new File([u.file], refileName, {
          type: u.file.type
 });

u.file為一個包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 對象的 Array — 或者任何這些對象的組合

refileName為自己想重新定義的名字

type: DOMString，表示將要放到文件中的內容的 MIME 類型。默認值為 "" 


以上這種可以成功重名文件名，但是在IE上不支持，或報此對象不存在的錯誤；

因 File 是繼續於Blob的所以有以下一種解決辦法：

let File = window.File

try {
  new File([], '')
} catch(e) {
  File = class File extends Blob {
    constructor(chunks, filename, opts = {}){
      super(chunks, opts)
      this.lastModifiedDate = new Date()
      this.lastModified =+ this.lastModifiedDate
      this.name = filename
    }
  }
}

File不支持的話重寫一下這個類，那么就在IE上就存在了File 這個類，然后就可以new了

 

另外 還有一種解決方法，這個方法個人覺得是最好的，既可以兼容谷歌也可以兼容IE等其他瀏覽器

 

let formData = new FormData();
//data 為二進制的blob圖片數據,//fileName 文件名
formData.append('files',data,fileName);

這樣就可以完美解決了！