IE9 elementUI文件上传的问题解决

在IE9浏览器下使用Element UI进行文件上传时，开发者可能会遇到一些兼容性问题。由于IE9对于新标准的支持不全，导致在使用Element UI自带的上传组件进行文件上传时，会遇到一些问题。特别是无法使用现代浏览器中常用的FormData对象，因为在IE9中，FormData API是不被支持的。 为了解决在IE9中无法使用FormData的问题，通常的做法是回退到传统的form表单上传方式。这种方法的一个主要问题是表单提交会导致整个页面的刷新。为了避免页面刷新，开发者需要动态添加一个iframe作为表单提交的目标。这样，表单数据被提交到iframe中，而不会影响当前页面的显示状态。提交后，监听iframe的onload事件，以获取上传后的回调。 在处理文件上传后的返回数据时，也会面临一个问题。如果服务器返回的数据类型为application/json，IE浏览器会尝试解析这个JSON数据，并将其作为文件处理。这会导致浏览器尝试打开或保存该文件，而不是将数据作为普通文本返回给前端。为了解决这个问题，需要与后端开发人员协商，将服务器返回的Content-Type改为text/plain。这样，浏览器会将返回内容作为普通文本处理，而不是文件，从而避免了自动打开或保存文件的尴尬情况。 在页面上如果需要对上传的图片进行回显，可能还会遇到一个特定的问题。由于URL中包含查询参数时，多个参数之间用&符号连接，但当这些参数被作为HTML内容返回时，浏览器会将&符号解析为HTML实体&。为了解决这个问题，需要在数据回显前将这些&符号转换回来。 考虑到上述问题，项目如果是在VUE框架下编写，使用Element UI作为UI库，那么在IE9中的上传兼容性问题需要特别注意。虽然Element官方并不支持IE9，但有些开发者仍然希望在IE9中使用Element UI。官方源码中已明确搁置了iframe上传的后续开发，转而使用vue-upload-component作为替代方案。这个组件虽然支持IE9，但使用起来可能会有一定难度，需要用户去适应它的使用方式和理解其内部实现机制。 具体到如何触发Element UI中的上传组件，开发者可以通过ref属性获取upload组件的实例，并在添加文件时激活上传。当状态变化时，会触发@input-file事件的回调函数。在这个回调函数中，通过比较新旧文件的状态，可以判断出当前上传的状态，如添加、更新、删除、上传成功或上传失败。 示例回调函数inputFile(newFile, oldFile)的工作原理是，如果旧文件活跃而新文件不活跃，表示上传过程已经完成。然后通过检查newFile的response属性来获取服务器返回的数据，这里可以参考jquery.form.js中的实现。如果返回的code值不是200，表示上传失败，并会根据错误码弹出相应的错误提示。如果上传成功，可以通过修改返回的图片URL中的&符号，以确保其在HTML中正确显示。 在IE9中实现Element UI的文件上传功能时，需要考虑一些特定的兼容性问题，并采取相应的技术措施。开发者需要理解这些技术细节，并通过调试和测试来确保功能的正确实现。虽然这可能会增加开发的复杂度和时间成本，但是通过这些努力，可以使得在不支持现代浏览器特性的老浏览器中，依然能够提供良好的用户交互体验。