原生调起文件上传input/file

前言

前端经常开发的过程中都会遇到上传文件这一功能，下面咱们介绍一个不用组件，（随便的事件）原生快速的调起input type=“file” 上传功能！

首先需要一个input标签

<input type="file" style={{ display: "none" }} id="input_file" multiple onChange={this.selectFileChange}/>

本人使用的React开发(原生的也是可行)，咱们给标签添加一个id（用ref也行），style把标签隐藏，添加一个onChange监听上传的文件事件

然后调起input事件

	/** 自己随便标签触发的点击事件*/
	dataImportClick = () => {
	  // 这是ts写法
   	  (document.getElementById("input_file") as HTMLElement).click();
   	  // js写法
   	   document.getElementById("input_file").click();
  	}
  	/** 然后处理上传文件的事件*/
  	selectFileChange = (event: any) => {
	    const fileList = [...event.target.files];
	    // 判断是否有上传的文件
	    if (fileList.length < 1) { return; }
	    ......
	    // 上传完毕之后清除选择的文件，以防止下次选择相同文件时不触发此事件
	    event.target.value = "";
	    // event.target.setAttrbute("value", ""); 不知道为什么这样设置不起效，有看到的朋友解释一波！
	  }

如果上传的文件（比如图片）需要预览，通过下面的函数处理为浏览器文件地址

 	getWindowUrl = file => {
		var url = null;
		if (window.createObjectURL != undefined) {
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) {
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	};

最后就是上传了别忘了上传文件处理为Form对象，和上传接口类型设置（走浏览器默认的上传格式，删除headers的类型配置），至此就介绍完了。
有什么更好的方式求链接！^^^_^^^