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);

这样就可以完美解决了！