ie9上传图片的兼容性问题

背景：

• 已有项目兼容ie9浏览器，原本使用antd图片上传ui组件报错，其功能无法正常实现。
• 即使撇掉ui框架，直接用原生ajax+formdata依然不行，因为ie根本无法获取到input要上传的file对象，也不支持formdata。

解决方案：

• 使用表单提交，此时项目中要求调用上传接口时要设置header请求头，并且，上传成功后可以在成功回调中做一些操作。
• 所以，引用jquery.form来实现设置header和回调。代码如下：

<div>
   <img width="100%" src={this.state.imageUrl||"http://tax-school-img.oss-cn-beijing.aliyuncs.com/2018-05-03/1525311589126.png?Expires=1840671579&OSSAccessKeyId=LTAIlteGNiLFLomK&Signature=5LjraX9LEU3Iza2N%2FVRKbvFvGs0%3D"} alt="" className="my_home_all_content_left_img" />
   <div style={{width:"90px"}}>修改头像</div>
   <form id="myForm" method="post" encType="multipart/form-data" target="iframe">
    <input ref="uploadInput" name="file" type="file" accept='image/*'
               onChange={this.onChangeAvatarUploadForIE.bind(this)}
               accept="image/jpg,image/jpeg"
               style={{display:"none"}}
               id="uploadInput"
               autoFocus={false}
     />
     <input ref="fileSubmit" type="submit" style={{display:"none"}}/>
     <label for="uploadInput"
          style={{height:"110px",width:"90px",position:"absolute",top:"0",left:"0",cursor:"pointer",background:"#000",zIndex:"99",opacity:"0"}}>
     </label>
   </form>
</div>

注意：

1.enctype属性设置为：encType="multipart/form-data"

enctype属性

2.label标签必须有。

• 一般我们会将input隐藏掉，因为其样式不符合设计需求。并通过点击事件触发input的点击。

• 但这种操作ie浏览器会报错：拒绝访问。
  （ie浏览器的安全机制，必须是用户主动点击才生效）

• 所以，只能真正手动去点击（不想让人看见的话，可以将透明度设置为0），或者使用现在的label标签。

3.给图片请求接口后加时间戳

• 比如应用场景是修改头像时，上传一张图片，完成上传后图片切换为最新的。

• 但是当我刷新页面时，图片又变成了修改之前的那张图片。检查后发现获取头像图片的接口http状态码为304(请求地址不变，取缓存)，ie对获取过的接口数据有缓存。

• 其实，解决这个问题也好办，将请求接口的地址后面增加一个时间戳即可，这样每次调用的接口不同，不会出现取缓存数据的问题。