IOS 下小程序 webview 的 input file拍照确认后页面刷新 [图片] [图片] [图片][图片]

IOS下,小程序 webview 内嵌H5页面,使用input file拍照确认后页面会刷新 , 并且获取不到刚才拍摄的照片,请问这是怎么回事? <template> <div class="wrapper"> <div class="picture"> <scroller lock-y scrollbar-x> <div class="scroll-wrapper" :style="{width:( imgList.length * 75 )+'px'}"> <div class="cuspic" v-for="(item,index) of imgList" :key="index"> <img :src="item" @click="show(index)"/> <!-- <span @click="del(index)" class="badge"> <span class="del-icon"></span> </span>--> <span class="del-icon" @click="del(index)" ></span> </div> </div> </scroller> <div class="up-wrapper"> <div class="file-icon" v-show="imgList.length<max"> <img @click="clickFile" src="../../../common/assets/icon/apply/Group 70@3x.png"/> <input ref="fileinput" type="file" accept="image/*" capture="camera" fieldName="file" multiple="multiple" @change="selectFiles" class="fileinput" /> </div> <div class="pic-hint"> <div class="max-message">上传检查报告或患处照片（最多9张）</div> <div class="g-pic">照片仅自己和医生可见</div> </div> </div> </div> <div> <loading :show="loadingShow" text="上传中"></loading> </div> <!--------图片预览-------start--> <div v-transfer-dom> <previewer :list="previewList" ref="previewer" :options="options"> <template slot="button-before"> </template> </previewer> </div> <!-------图片预览-------end--> </div> </template> <script type="text/ecmascript-6"> import {Badge, Loading, TransferDomDirective as TransferDom, Previewer,Grid, GridItem,Scroller } from 'vux' import {uploadFile} from '@network/Api' import {mapState,mapMutations} from 'vuex' export default { name: 'imageUpload', directives: { TransferDom }, components: { Badge, Loading, Previewer,Grid, GridItem,Scroller }, props: { multiple: { type: Boolean, default: true, }, value: { type: [Boolean, String, Number, Array], default: false }, max: { type: [Boolean, String, Number, Array], default: 9 } }, data() { return { files: null, imgList: [], imgListBig: [], formData: null, fileUrl: [], loadingShow: false, options: { getThumbBoundsFn(index) { // find thumbnail element let thumbnail = document.querySelectorAll('.cuspic')[index] // get window scroll Y let pageYScroll = window.pageYOffset || document.documentElement.scrollTop // optionally get horizontal scroll // get position of element relative to viewport let rect = thumbnail.getBoundingClientRect() // w = width return {x: rect.left, y: rect.top + pageYScroll, w: rect.width} // Good guide on how to get element coordinates: // http://javascript.info/tutorial/coordinates }, isClickableElement: function (el) { return /previewer-delete-icon/.test(el.className) }, tapToToggleControls: false, }, directives: { TransferDom }, } }, watch: { imgList(val) { this.$emit('input', val) }, bigPictureUrls(){ this.imgListBig = this.bigPictureUrls } }, computed:{ ...mapState({ bigPictureUrls: state => state.bigPictureUrls }), previewList(){ let array = []; this.imgListBig.map((item, index) => { array.push({ src: item }) }) console.log('array---缓存大图',array) return array } }, methods: { ...mapMutations(['saveBigPictureUrl']), //压缩图片 compressImage(src) { return new Promise(function (resolve, reject) { let _this = this, imgType let img = new Image() if (src) { imgType = src.split(';')[0] if (imgType) { imgType = imgType.split(':')[1] } } img.src = src img.onload = function () { //计算符合目标尺寸宽高值，若上传图片的宽高都大于目标图，对目标图等比压缩；如果有一边小于，对上传图片等比放大。 let goalWidth = 1080, //目标宽度 goalHeight = 1080, //目标高度 imgWidth = img.naturalWidth, //图片宽度 imgHeight = img.naturalHeight, //图片高度 tempWidth = imgWidth, //放大或缩小后的临时宽度 tempHeight = imgHeight, //放大或缩小后的临时宽度 r = imgWidth / imgHeight, //压缩比 quality = 0.5 //图片压缩质量 // 宽高均 <= 1080，图片尺寸大小保持不变 if (imgWidth < goalWidth && imgHeight < goalHeight) { } // 宽高均 > 1080 && 宽高比 > 2， else if (imgWidth > goalHeight && imgWidth > goalHeight) { // 宽大于高 取较小值(高)等于1080，较大值等比例压缩 if (r > 1) { tempHeight = goalHeight tempWidth = goalHeight * r } // 高大于宽 取较小值(宽)等于1080，较大值等比例压缩 (宽高比在0.5到2之间 ) else { tempHeight = goalWidth / r tempWidth = goalWidth } } // 宽或高 > 1080 else { // 宽图 图片尺寸大小保持不变 if (r > 2) { tempWidth = imgWidth tempHeight = imgHeight } // 长图 图片尺寸大小保持不变 else if (r < 0.5) { tempWidth = imgWidth tempHeight = imgHeight } // 宽大于高 取较大值(宽)等于1080，较小值等比例压缩 else if (r > 1) { tempWidth = goalWidth tempHeight = goalWidth / r } // 高大于宽 取较大值(高)等于1080，较小值等比例压缩 else { tempHeight = goalHeight tempWidth = goalHeight * r } } let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') canvas.width = tempWidth canvas.height = tempHeight ctx.drawImage(img, 0, 0, tempWidth, tempHeight) // let base64 = canvas.toDataURL(imgType || 'image/jpeg', quality) canvas.toBlob(function (blob) { resolve(blob) }, imgType || 'image/jpeg') } }) }, compressImageWithFiles(files) { let fileProms = []; for (let file of files) { let fp = new Promise((resolve, reject) => { let vueInst = this; let reader = new FileReader() reader.onload = function (e) { let pro = vueInst.compressImage(e.target.result); resolve(pro) } reader.readAsDataURL(file); }) fileProms.push(fp); } return Promise.all(fileProms) }, async selectFiles(e) { const maxCount = this.max const files = e.target.files if (!files.length) { return } console.log('------image size------',files[0].size) let count = this.imgList.length + files.length if (count > maxCount) { this.$alert.error({ content: `最多上传${maxCount}张`, confirmText: '好的', onConfirm() { } }) return } let filesFilter = await this.converImgList(files); if (filesFilter == null || filesFilter.length == 0) { return } filesFilter = await this.compressImageWithFiles(filesFilter); this.formData = new FormData() if (this.multiple) { for (let i = 0; i < filesFilter.length; i += 1) { this.formData.append('file', filesFilter[i]) } this.formData.append('userid', shareInst.store.state.user.uid) this.formData.append('ext', '80') this.formData.append('module', 1) } else { this.file = filesFilter[0] this.formData.append('userid', shareInst.store.state.user.uid) this.formData.append('file', this.file) this.formData.append('ext', '80') this.formData.append('module', 1) } this.upload() let ele = document.querySelector('.scroll-wrapper') if(this.imgList.length >=4){ console.log('this.imgList.length------ ',this.imgList.length ) ele.style.transform =`translate(${-90 * (this.imgList.length - 4) }px,0px)` } }, async converImgList(files) { let maxSize = '10MB'; let allowed = [".jpg", ".gif", ".png", ".jpeg"]; let _this = this; let errFile = [] for (let i = 0; i < files.length; i++) { let file = files[i] if (!this.checkType(file, allowed)) { errFile.push({ index: i, lable: file.name, type: 'type' }) continue } if (!this.limitFileSize(file, maxSize)) { errFile.push({ index: i, lable: file.name, type: 'size' }) continue } /* let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { _this.imgList.push(this.result) }*/ } if (errFile.length) { let sizeErr = '' let typeErr = '' let errIndex = [] errFile.map(item => { if (item.type == 'size') { sizeErr += item.lable + ' | ' } if (item.type == 'type') { typeErr += item.lable + '| ' } errIndex.push(item.index) }) let content = ''; if (sizeErr) { sizeErr = sizeErr.substring(0, sizeErr.length - 2) content += `单文件大小超出[${maxSize}]：${sizeErr}`; } if (typeErr) { sizeErr = typeErr.substring(0, typeErr.length - 2) content += `类型只允许[${allowed}]：${typeErr}`; } this.$alert.error({ content: `${content}，请重新上传`, confirmText: '好的', onConfirm() { } }) this.$refs.fileinput.value = '' return null } return files; }, upload() { // this.loadingShow = true; uploadFile(this.formData).then((res) => { if (res && res.length) { res.map(item => { let str1 = this.insertStr(item.filepath, item.filepath.lastIndexOf('/'), '/thumb') let str2 = this.insertStr(str1, str1.lastIndexOf('_'), '_thumb') this.imgList.push(str2) console.log('str2---',str2) this.imgListBig.push(item.filepath) this.$store.commit('saveBigPictureUrl', this.imgListBig) console.log(' this.imgListBig-----', this.imgListBig) }) } // this.loadingShow = false; }).catch((e) => { }) this.$refs.fileinput.value = '' }, // DataURL转Blob对象 dataURLToBlob(dataurl) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type: mime}); }, clickFile() { this.$refs.fileinput.click() }, limitFileSize(file, limitSize) { var arr = ["KB", "MB", "GB"] var limit = limitSize.toUpperCase(); var limitNum = 0; for (var i = 0; i < arr.length; i++) { var leval = limit.indexOf(arr[i]); if (leval > -1) { limitNum = parseInt(limit.substr(0, leval)) * Math.pow(1024, (i + 1)) break } } if (file.size > limitNum) { return false } return true }, insertStr(soure, start, newStr) { return soure.slice(0, start) + newStr + soure.slice(start); }, checkType(file, allowed) { const fileName = file.name; const seat = fileName.lastIndexOf("."); const extension = fileName.substring(seat).toLowerCase(); return this.contains(allowed, extension) }, contains(arr, obj) { let i = arr.length; while (i--) { if (arr[i] == obj) { return true; } } return false; }, del(index) { this.imgList.splice(index, 1); this.imgListBig.splice(index, 1); }, show(index) { this.$refs.previewer.show(index) }, }, created() { this.imgList = this.value this.imgListBig = this.bigPictureUrls }, } </script> <style lang="scss" type="text/scss" scoped> .wrapper { width: 100%; overflow: hidden; .scroll-wrapper{ overflow: auto; } .picture { width: auto; .cuspic { display: inline-block; margin-right: 15px; margin-top: 10px; position: relative; .del-icon{ position: absolute; right: -8px; top: -8px; display: inline-block; width: 20px; height: 20px; background-size:100% 100%; background-position:center ; background-image: url("../../../common/assets/icon/apply/del@3x.png"); } } .file-icon { position: relative; display: inline-block; margin-right: 10px; input { position: absolute; left: 0; top: 24px; opacity: 0; } } img { width: 60px; height: 60px; /* margin-right: 9px;*/ margin-left: 0px; /* margin-top: 5px;*/ border-radius: 3px; object-fit:cover; } } /deep/ .weui-grids:before { height: 0px; border-top: none; } /deep/ .weui-grid:after { height: 0px; border-bottom: none; } .pic-hint{ height: 60px; display: inline-flex; justify-content: center; flex-direction: column; align-content: center; vertical-align: middle; } .g-pic{ color: $subtitle-color; } .max-message{ } .up-wrapper{ display: flex; justify-content: flex-start; align-content: center; margin-top: 10px; } /deep/ .weui-grid{ padding: 10px; } } </style>