html
<form id="mainForm"> <div class="content"> <div class="img-area"> <div class="container"> <input type="file" id='id-face' name='face' accept="image/*" /> <img class="logo" :src='src' alt="" id='face-result'> <div class="row_flex al_flex box"> <div id='face-empty-result'> <el-button size='mini'>拍照</el-button> </div> </div> </div> </div> </div> </form> <div class="photo_box"> <div class="mini_img" v-for='(item,idx) in link' :key="idx"> <img alt="" class="photo_img" :src='item'> <i class="el-icon-close del_icon" @click='GoDelImg(idx)'></i> </div> </div><div class="btn_icon"> <el-button type="primary" size='mini' @click='submit'>提交</el-button> </div>js 注释
var app = new Vue({ el: "#app", data: { uuid: '', identity_card: '', src: '../other/face.png', fg: false, link: [], // 页面展示图片的图片地址 up_link: [], // 上传后台的图片的base数据 back_link: [],// 上传返回的图片地址数组 }, created() { const that = this that.identity_card = pub._LinkParm('id') that.uuid = pub._LinkParm('uuid') }, mounted() { const that = this window.onload = function () { document.getElementById("id-face").addEventListener("change", function () { that.onFileChange(this, "face-result", "face-empty-result") }); }; }, methods: { /** * 选中图片时的处理 * @param {*} fileObj input file元素 * @param {*} el //选中后用于显示图片的元素ID * @param {*} btnel //未选中图片时显示的按钮区域ID */ onFileChange(fileObj, el, btnel) { const that = this; that.fg = true var windowURL = window.URL || window.webkitURL; var dataURL; var imgObj = document.getElementById(el); document.getElementById(btnel).style.display = "none"; imgObj.style.display = "block"; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src = dataURL; that.link.unshift(dataURL) } else { dataURL = fileObj.value; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } }, GoDelImg(idx) { const that = this; that.link.splice(idx, 1) }, /** * 将图片压缩后返回base64格式的数据 * @param {*} image img元素 * @param {*} width 压缩后图片宽度 * @param {*} height 压缩后图片高度 * @param {*} qua //图片质量1-100 */ compressImageTobase64(image, width, height, qua) { var _img = image, _img_h = _img.naturalHeight, _img_w = _img.naturalWidth, _img_num = 1920, _img_width, _img_height, _img_b; if (_img_w > _img_h) { _img_b = _img_num / _img_w; _img_width = _img_num; _img_height = _img_b * _img_h } else { _img_b = _img_num / _img_h; _img_height = _img_num; _img_width = _img_b * _img_w } var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'); var w = image.naturalWidth, h = image.naturalHeight; canvas.width = _img_width || w; canvas.height = _img_height || h; ctx.drawImage(image, 0, 0, w, h, 0, 0, _img_width, _img_height); var data = canvas.toDataURL("image/jpeg", quality); return data; }, submit() { const that = this if (that.fg) { /** * 循环获取图图片的src转化为base 并放入数组 */ let photo_len = $('.photo_img').length that.up_link = [] for (let iu = 0; iu < photo_len; iu++) { let canvas_base = that.compressImageTobase64(document.getElementsByClassName("photo_img")[iu]) let arr = canvas_base.split(',') that.up_link.push(arr[1]) } var formData = new FormData(); formData.append("face", that.up_link); formData.append("identity_card", that.identity_card); $.ajax({ url: pub._url + pub._DetailApi.testUploadPic, type: 'POST', cache: false, data: formData, dataType: "JSON", processData: false, contentType: false, success: function (res) { console.log(res.data) if (res.code == '200') { that.back_link = res.data that.onSubmit() } else { alert(res.msg) } }, error: function (r) { // console.log(r) } }); } else { alert('请拍照！') } }, onSubmit() { const that = this; var use_parm = { that: that, _url: pub._url, ur: ur, // 具体接口 cbk: that.cb_editPhoto, // 回调 data: { uuid: that.uuid, photo_path: that.back_link }, // 形参 }; console.log('执行提交事件') pub._InitAjax(use_parm) }, cb_editPhoto(res) { console.log(res) if (res.code == "200") { // alert('保存成功,跳转信息查询页！') } } },})js 无注释
var app = new Vue({ el: "#app", data: { uuid: '', identity_card: '', src: '../other/face.png', fg: false, link: [], up_link: [], back_link: [], }, created() { const that = this that.identity_card = pub._LinkParm('id') that.uuid = pub._LinkParm('uuid') }, mounted() { const that = this window.onload = function () { document.getElementById("id-face").addEventListener("change", function () { that.onFileChange(this, "face-result", "face-empty-result") }); }; }, methods: { onFileChange(fileObj, el, btnel) { const that = this; that.fg = true var windowURL = window.URL || window.webkitURL; var dataURL; var imgObj = document.getElementById(el); document.getElementById(btnel).style.display = "none"; imgObj.style.display = "block"; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src = dataURL; that.link.unshift(dataURL) } else { dataURL = fileObj.value; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } }, GoDelImg(idx) { const that = this; that.link.splice(idx, 1) }, compressImageTobase64(image, width, height, qua) { var _img = image, _img_h = _img.naturalHeight, _img_w = _img.naturalWidth, _img_num = 1920, _img_width, _img_height, _img_b; if (_img_w > _img_h) { _img_b = _img_num / _img_w; _img_width = _img_num; _img_height = _img_b * _img_h } else { _img_b = _img_num / _img_h; _img_height = _img_num; _img_width = _img_b * _img_w } var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'); var w = image.naturalWidth, h = image.naturalHeight; canvas.width = _img_width || w; canvas.height = _img_height || h; ctx.drawImage(image, 0, 0, w, h, 0, 0, _img_width, _img_height); var data = canvas.toDataURL("image/jpeg", quality); return data; }, submit() { const that = this if (that.fg) { let photo_len = $('.photo_img').length that.up_link = [] for (let iu = 0; iu < photo_len; iu++) { let canvas_base = that.compressImageTobase64(document.getElementsByClassName("photo_img")[iu]) let arr = canvas_base.split(',') that.up_link.push(arr[1]) } var formData = new FormData(); formData.append("face", that.up_link); formData.append("identity_card", that.identity_card); $.ajax({ url: pub._url + pub._DetailApi.testUploadPic, type: 'POST', cache: false, data: formData, dataType: "JSON", processData: false, contentType: false, success: function (res) { if (res.code == '200') { that.back_link = res.data that.onSubmit() } else { alert(res.msg) } }, error: function (r) { } }); } else { alert('请拍照！') } }, onSubmit() { const that = this; var use_parm = { that: that, _url: pub._url, ur: pub._DetailApi.editPhoto, cbk: that.cb_editPhoto, data: { uuid: that.uuid, photo_path: that.back_link }, }; console.log('执行提交事件') pub._InitAjax(use_parm) }, cb_editPhoto(res) { if (res.code == "200") { console.log('保存成功') } } },})选择图片
/** * 选中图片时的处理 * @param {*} fileObj input file元素 * @param {*} el //选中后用于显示图片的元素ID * @param {*} btnel //未选中图片时显示的按钮区域ID */ onFileChange(fileObj, el, btnel) { const that = this; that.fg = true var windowURL = window.URL || window.webkitURL; var dataURL; var imgObj = document.getElementById(el); document.getElementById(btnel).style.display = "none"; imgObj.style.display = "block"; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src = dataURL; that.link.unshift(dataURL) } else { dataURL = fileObj.value; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } },压缩图片
/** * 将图片压缩后返回base64格式的数据 * @param {*} image img元素 * @param {*} width 压缩后图片宽度 * @param {*} height 压缩后图片高度 * @param {*} qua //图片质量1-100 */ compressImageTobase64(image, width, height, qua) { var _img = image, _img_h = _img.naturalHeight, _img_w = _img.naturalWidth, _img_num = 1920, _img_width, _img_height, _img_b; if (_img_w > _img_h) { _img_b = _img_num / _img_w; _img_width = _img_num; _img_height = _img_b * _img_h } else { _img_b = _img_num / _img_h; _img_height = _img_num; _img_width = _img_b * _img_w } var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'); var w = image.naturalWidth, h = image.naturalHeight; canvas.width = _img_width || w; canvas.height = _img_height || h; ctx.drawImage(image, 0, 0, w, h, 0, 0, _img_width, _img_height); var data = canvas.toDataURL("image/jpeg", quality); return data; },
