IOS下小程序 webview 内嵌H5页面,使用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>
