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为一个包含ArrayBufferArrayBufferViewBlob,或者 DOMString 对象的 Array — 或者任何这些对象的组合

refileName为自己想重新定义的名字

typeDOMString,表示将要放到文件中的内容的 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);

这样就可以完美解决了!

 

猜你喜欢

转载自www.cnblogs.com/freddyhuang/p/12743257.html