javascript 手机移动端 微信 拍照 录音 录视频并阿里oss上传
调用照相机，拍照 <input type="file" accept="image/*" capture="camera"> 1 调用摄像机，视频 <input type="file" accept="video/*" capture="camcorder"> 1 调用录音机，录音 <input type="file" accept="audio/*" capture="microphone"> 1 第一种方法： <body> <input type="file" id="file_input" name="img" /> <img id="showimg"> <script type="text/javascript"> var showimg = document.getElementById("showimg"); var imginput = document.getElementById("file_input"); imginput.onchange = function () { var files = this.files; var url = URL.createObjectURL(files[0]); showimg.src=url; } </script> </body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 第二种方法： <body> <input type="file" id="file_input" name="img" /> <div id="showimg"></div> <script type="text/javascript"> ! function(a, b) { var showimg = document.getElementById("showimg"); var imginput = document.getElementById("file_input"); if (typeof FileReader === 'undefined') { showimg.innerHTML = "抱歉，你的浏览器不支持 FileReader"; imginput.setAttribute('disabled', 'disabled'); } else { imginput.addEventListener('change', function() { var file = this.files[0]; if (!/image\/\w+/.test(file.type)) { alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { showimg.innerHTML = '<img src="' + this.result + '" alt=""/>' } }, false); } }(window); </script> </body> vue.js里面的话，使用方法 <input type="file" name="file" accept="image/*" capture="camera" @change="onFileChange($event)"/> var files = e.target.files; var file = files[0]; 阿里oss上传文档https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.763.t7DwNz exports.initOss = function(access) { // ossClient = new OSS({//公司没开跨域暂时行不通 // region: 'oss-cn-shanghai', // //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。 // accessKeyId: access.AccessKeyId, // accessKeySecret: access.AccessKeySecret, // bucket:'AAAAA' //}) } var result =yield client.multipartUpload('object-key','local-file',{ } 把上面获取的 var file 传入local-file就可以了， object-key是图片在阿里的路径，自己配置（string）
