初始代码是这样写的,然后 ios相机、相册都没问题,安卓的只能选择相册。 代码如下:
<template>
<div>
<input
id="upload_file"
type="file"
class="file-input"
accept="image/png,image/jpeg,image/jpg"
:multiple="multiple"
@change="inputChange"
style="display: none"
/>
</div>
</template>
?
然后就是一顿在网上借鉴大佬们的思路(*^_^*),发现有人说在input上加 capture='camera',只允许拍照上传?但还是试一下把,试一下又不会怀孕。 代码如下:
<template>
<div>
<input
id="upload_file"
type="file"
capture='camera'
class="file-input"
accept="image/png,image/jpeg,image/jpg"
:multiple="multiple"
@change="inputChange"
style="display: none"
/>
</div>
</template>
相机倒是调出来了但是 ios和安卓就只能调用相机,都不能调用相册......
然后看看把,继续借鉴了一波大佬们的操作。判断是ios就删除 capture属性,这样就好了?那安卓怎么办?唉..还是试一试把,可能就好了呢。?代码如下:
<template>
<div>
<input
id="upload_file"
type="file"
capture='camera'
class="file-input"
accept="image/png,image/jpeg,image/jpg"
:multiple="multiple"
@change="inputChange"
style="display: none"
/>
</div>
</template>
<script>
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机,是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
document.querySelector('.file-input').removeAttribute("capture");
};
</script>
果不其然 ios 可以了,安卓还是完蛋,还是只能掉相册,不能调相机
最终解决,?苦思冥想(连懵带猜):???accept="image/*"??和搞来搞去的?capture='camera' 没什么卵关系,这个属性只允许相机拍照上传。代码如下:
<template>
<div>
<input
id="upload_file"
type="file"
class="file-input"
accept="image/*"
:multiple="multiple"
@change="inputChange"
style="display: none"
/>
</div>
</template>
<script>
...//这里的判断代码,请无情删除
</script>
|