预览方法:使用h5的原生api—-window.URL.createObjectURL(this.files.item(0))来获取表单上传元素的url绝对地址、然后将这个值赋给一个新增的img,这样简单的预览效果就实现了,上传至后端有待学习。
值得注意的是:window.URL.createObjectURL()不得不去考虑一下,兼容性函数为
function getFileUrl(sourceId) {// 兼容不同浏览器的URL对象var polyfill = window.URL || window.webkitURL || window.moxURLreturn polyfill.createObjectURL(sourceId)}
FileReader() API可以获取文件的base64格式数据,示例
const reader = new FileReader()reader.onload = () => {console.info(reader.result)document.querySelector('#img').src = reader.result}
