最近遇到了一点感情问题，一个月没有更博了，么得办法，那段时间突然就没了人生目标和方向。浑浑噩噩的确挺恐怖的.......
好吧，在写react的时候要实现一个功能，就是在在一个type为file的Input标签中，选择一个图片，然后在dom上显示这张图片。想过两个方案。
- 添加一个上传按钮，异步提交到服务器，然后后端返回一个cdn地址，在img的src属性上显示这个路径，因为是react，所以讲这个src属性加入到state就可以实现实时刷新。但是因为在这个in普通标签之前还有许多表单，单独上传图片后会导致这个表单刷新，前面填写的信息就 白写了，影响用户体验。虽然网上说配合fromData就可以异步上传，但是react中还是会刷新整个页面。
- 在这个input标签的onchange属性中直接拿到file的url显示在img的src上
方案2的实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<title>Web Cache</title>
<script>
function onImngChange(event) {
console.log(event);
const windowUrl = window.URL
const fileObj = event.currentTarget.files[0]
if(fileObj) {
const dataUrl = windowUrl.createObjectURL(fileObj)
const imgObj = document.getElementById('preview')
imgObj.src = dataUrl
}
}
</script>
</head>
<body>
<input type="file" id="noImg" onchange="onImngChange(event)" />
<img id="preview" alt="..." />
</body>
</html>
屏幕快照 2017-11-13 上午12.17.34.png
这里的主要实现在onchange方法中，就是调用的onI'mgChange中。
event.currentTarget
首先先看一下官方对这个对象的定义
currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。
就是说拿到触发这个onchange="onImngChange(event)"的对象，就是<input>，这里的target和currentTarget是一样的，但是有些地方，这两个对象可能不一样，要搞清楚他们的区别挺烦的，但是只要明白他们分别对应的是什么就很简单了
- e.target 指向触发事件监听的对象。
- e.currentTarget 指向添加监听事件的对象。
在currentTarget对象中我们可以获取到file属性，file[0]就是我们要找的那个文件
window.URL.createObjectURL()
Window.URL 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象。
创建一个url来表示file对象和blob对象
总结
首先得拿到file的对象，这里可以根据target对象拿，也可以直接getElementById().file去拿，然后将这个对象url化，用window.URL的createObjectURL方法。
具体请参考这篇[图片上传中...(屏幕快照 2017-11-13 上午12.17.34.png-428fe6-1510503520907-0)]
网友评论