先看效果图
一、直接展示上传的图片
CSS代码：
#previewImg {position: relative;width: 80px;height: 80px;line-height: 80px;border: 1px dashed rgb(0, 0, 0, .5);text-align: center;cursor: pointer;}#previewImg:hover {border: 1px dashed rgb(0, 0, 0);}#previewImg p {width: 100%;margin: 0;}#fileInp {position: absolute;top: 0;left: 0;z-index: 5;width: 100%;height: 100%;cursor: pointer;opacity: 0;}#fileImg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
HTML代码：
<div id="previewImg"><input type="file" id="fileInp"><img src="" alt="111" id="fileImg"><p>上传图片</p></div>
JS代码：
let inp = document.getElementById('fileInp');let fileImg = document.getElementById('fileImg');inp.onchange = function() {let inpObj = inp.files[0]; // 拿到上传文件的属性// inpObj.size 上传文件的大小（字节数）// inpObj.type 上传文件的类型 例如：image/pngif (inpObj.type !== "image/png") {alert('上传的不是png/jpg类型的图片')} else if (inpObj.size / 1024 / 1024 > 2) {alert('上传的图片超过2MB')} else {let windowURL = window.URL || window.webkitURL;let img = document.getElementById('preview');if (inp && inpObj) {// createObjectURL(inpObj) 创建一个文件的临时地址let dataURL = windowURL.createObjectURL(inpObj);fileImg.setAttribute('src', dataURL);fileImg.style.opacity = 1}}}
二、将图片转换成base64，再上传
CSS、HTML代码同上
JS代码
let inp = document.getElementById('fileInp');let fileImg = document.getElementById('fileImg');inp.onchange = function() {let inpObj = inp.files[0]; // 拿到上传文件的属性// inpObj.size 上传文件的大小（字节数）// inpObj.type 上传文件的类型 例如：image/pngif (inpObj.type !== "image/png") {alert('上传的不是png/jpg类型的图片')} else if (inpObj.size / 1024 / 1024 > 2) {alert('上传的图片超过2MB')} else {let windowURL = window.URL || window.webkitURL;let img = document.getElementById('preview');if (inp && inpObj) {// createObjectURL(inpObj) 创建一个文件的临时地址let dataURL = windowURL.createObjectURL(inpObj);toBase64(dataURL);}}}function toBase64(imgSrc) {var canvas = document.createElement("canvas");canvas.width = 320;canvas.height = 320;let context = canvas.getContext("2d");context.rect(0, 0, canvas.width, canvas.height);context.fillStyle = "#fff";context.fill();let myImage = new Image();myImage.src = imgSrc; //背景图片 你自己本地的图片或者在线图片myImage.crossOrigin = 'Anonymous';let base64 = null;myImage.onload = () => {context.drawImage(myImage, 0, 0, 320, 320);base64 = canvas.toDataURL("image/png");// 等图片转换成base64之后 更新图片fileImg.setAttribute('src', base64);fileImg.style.opacity = 1}}
