前端上传文件

前端上传文件

上传方式

  input[type="file"]上传文件

几种需求

修改文件名称

得到文件后，对名字统一修改
File对象为只读对象，不能直接修改；

1. 设置对象writable

Object.defineProperty(file, 'name', {writable: true})
file.name = newFileName;

 var newFile =  new File([file], newFilename, {type: file.type});

注意：在safari12下，newFile的size为0；
File API

如果是图片，获取图片初始width, height

一般思路：

1. 获取图片地址
2. Image加载地址，读取width/height

获取图片地址

1. 利用H5的API，获取对象地址

var imgUrl = window.createObjectURL(imgFile);

2. 上传到服务器，获得网络地址

customUpload(file).then(url => {return url}).catch(err => {});

计算图片地址

// 获取图片大小
function getImageSize(url) {
      const imgObj = new window.Image();
      
      return new Promise((resolve, reject) => {
                imgObj.onload = () => {
                       resolve({width: imgObj.width, height: imgObj.height, img: imgObj});
                }
                imgObj.onerror = () => {
                       reject(error);
                  }
      });
}

** 注意：**
URL.createObject

待整理

与File, Blob等关系，还要了解

思考

 获得文件File之后，上传过程中会有什么问题？考虑几种场景

文件名中的特殊字符

单个大文件

批量上传文件

收获

解决问题的能力

1. 从表象入手，利用已有知识和经验，按图索骥，定位问题，对症下药；
2. 在解决问题过程中，常常会为知识和认知付费。有一部分原因，平时没有积累系统知识体系，存在一些不好的习惯(哪痛医哪, 临时抱佛脚)；

侥幸过关，当你再次入坑时，是否有冷汗直冒...

最重要一点

有什么问题，欢迎讨论，大家可以一起完善