Section1单张上传和预览:
思路:用<input type="file"/> 触发onchange事件,取出e.target.files || e.target.dataTransfer.files, 将其转为window.createObjectURL(file)有效的url 写入<img src=""/>的src中就可以预览了。然后将这个url用new FormData().append("",url); 设置ajax的processData:false,contentType:false;就可以上传到后台了。
请看代码:
<div class="facemain" id="facemain"> <div class="viewface-container"> <img class="viewfaceimg" id="viewfaceimg" src="../../../img/weixin/weixin-v2/faceimg-default.jpg"/> </div> <div class="faceupload-div"> <label id="face_label" class="face-label"><input id="face_input" class="face-input" type="file"> 拍照或选择相片 </label> <span class="saveface-btn" id="saveface_btn"> 保存 </span> </div> <img class="face-closebtn" src="/newPage/img/weixin/weixin-v2/qcode-closebtn.png" @click.stop="closeFace"/> </div>
js: