前端图片上传问题整理

问题整理

最近做的项目是要实现多张上传图片的功能，可以删除图片，选中多张图片并重新上传，在实践过程中遇到了以下问题：

图片如何更好的布局以及删除及选中效果如何实现
利用<input type="file">上传图片时，上传同一张图片失效
上传多张图片时，如何读取多张上传文件
<input type="file">同时添加单击和双击事件，单击事件触发两次
利用get方式传递参数，中文乱码问题

1.图片效果

为实现图1中的效果，需要解决两个问题：第一个是如何进行图片布局；第二个是如何实现删除及选中效果。

图片布局
对于图片布局，利用<img><span><input>这三个标签是可以实现图1中的样式的，但是需要进行样式调整，而且图片多张进行排列的时候间距及布局不好把握。
在插入图片方面，HTML5提供了<figure>标签来插入图片，并提供<figcaption>来描述图片。

<figure><figcaption>图片描述：<input tppe="text"></input></figcaption>
</figure>

删除及选中效果
在插件样式方面，boostrap提供了丰富的插件样式，可以实现图1中需要的删除及选中效果。
需要注意的是，删除的叉号标志需要定位到图片的右上角，可以利用绝对定位的方式来实现。选中效果则需要以下三步来完成：将对号定位到图片中间位置，为对号添加蓝色圆形填充，将对号定位到圆形填充的中央。

position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;border: 2px solid blue;
border-radius: 50%;text-aligh: center;
line-height: 80px;

2.上传同一张图片

利用<input type="file">上传图片时，当选中了一张图片点击取消或者选中图片并打开，然后删除该图片，再选中刚刚的图片是无法出发onChange或onClick事件的。
这种现象产生的原因是上传文件的时候，会将当前的文件路径保存在<input>的value中，点击取消其value值不会改变，所以导致第二次上传同一张图片的时候，是同一个value，因此无法触发函数。

解决办法
a. 删除原来的<input>框，重新生成一个<input>框，并绑定onChange事件。
b. 每次上传文件之后，手动修改input框的value值。

在开发过程中，要尽量避免直接操纵DOM元素的方法，因此对于以上两种解决办法，倾向于采取第二种。
在<input>框中，绑定ref，用于获取DOM元素。

<input ref={input => {this.input = input;}}>

然后，在上传文件后，将value值清空。

this.input.value = '';

3.读取多张上传文件

利用<input type="file">上传图片，如果添加了"webkitdirectory"属性，则可以一次上传多张图片，此时涉及到如何读取多张图片并展示。
首先，需要获取文件信息，<input>会将上传的文件信息以数组的形式保存在event中，可以通过event.target.files来获取文件信息。
然后，new一个FileReader对象来读取文件，FileReader主要有3个方法如下列表展示。

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

对于图像的读取，选择readAsDataURL方法，读取读像的base64编码，用于图像的展示。当文件读取成功后，需调用FileReader的onload方法来进行图片读取成功之后的操作。

onChange = e => {let $input = e.target;const files = $input.files;const reader = new FileReader();reader.readAsDataURL(files[0]);reader.onload = () => {img.push(this.result); //图像base64编码保存到数组中}

需要注意的是，当一次上传多张图片时，需要将files数组中的多个值全部读出来，最容易想到的办法是外层加一个for循环，每次循环读取。但是这样没法全部按顺序读取图片，其原因是reader.onload()事件是异步触发的。
可以通过递归调用读取图片函数来解决这个问题：

onChange = e => {let $input = e.target;const files = $input.files;this.loadImgs(files, 0);
}
loadImgs = (files, index) => {const _this = this;if (index !== files.length){const reader = new FileReader();reader.readAsDataURL(files[i]);reader.onload = () => {img.push(this.result); //图像base64编码保存到数组中index++;_this.loadImgs(files, index); //递归调用读取函数}}
}

4.阻止单击事件

项目中有这样一个应用场景，单击图片呈选中状态，双击图片需要展示图片的原图。首先想到的是通过给图片绑定单击事件和双击事件来出发选中及展示原图。
<img src={content} onClick={this.checkImage} onDoubleClick={this.showImage}>

但是这样存在的问题是双击图片时，会先触发单击事件，然后再出发双击事件，而我需要的是双击时只触发双击事件。这样的话就需要给单击事件一个延迟时间，在时间范围内点击图片不会出发单击事件，也就解决了这个问题。

const timer = null;
checkImage = () => {clearTimeout(timer);timer = setTimeout(function(){//do something},250);
}
showImage = () => {clearTimeout(timer);// do something
}

值得注意的是，在setTimeout定时器中，this指针会获取不到，因此如果需要在定时器函数中用到this指针，需要实现声明一个新的变量const _this=this;来存储this指针。

5.get传参问题

通过window.open()打开链接的时候，需要将参数传到新页面，在新页面需要接收这个参数并进行处理。这个时候可以通过window.location这个对象的属性来接收并处理参数。该对象包含的属性有以下几种：

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

当利用window.location.search来获取参数的时候，需要注意两点：
a. 需要用正则找到需要的参数。
window.location.search.substring(1).split("=")[1]，如果有多个参数，还需要利用“&”进一步分割。
b. 参数中存在中文时会被编码。
“./main.html?user=小明"该链接中存在中文字符，如果不解码直接接收会接收到一串编码，而不是想要的中文参数。因此，需要利用decodeURIComponent()进行解码。
decodeURIComponent(window.location.search.substring(1).split("=")[1])

以上就是对最近遇到的问题的整理。