预览方法:使用h5的原生api—-window.URL.createObjectURL(this.files.item(0))来获取表单上传元素的url绝对地址、然后将这个值赋给一个新增的img,这样简单的预览效果就实现了,上传至后端有待学习。
    值得注意的是:window.URL.createObjectURL()不得不去考虑一下,兼容性函数为

    1. function getFileUrl(sourceId) {
    2. // 兼容不同浏览器的URL对象
    3. var polyfill = window.URL || window.webkitURL || window.moxURL
    4. return polyfill.createObjectURL(sourceId)
    5. }

    FileReader() API可以获取文件的base64格式数据,示例

    1. const reader = new FileReader()
    2. reader.onload = () => {
    3. console.info(reader.result)
    4. document.querySelector('#img').src = reader.result
    5. }