javascript 手机移动端 微信 拍照 录音 录视频并阿里oss上传-阿里云开发者社区

开发者社区> 开发与运维> 正文

javascript 手机移动端 微信 拍照 录音 录视频并阿里oss上传

简介: 调用照相机,拍照  1 调用摄像机,视频  1 调用录音机,录音  1 第一种方法: var showimg = document.

调用照相机,拍照 

<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'
   //})
}


  1. var result =yield client.multipartUpload('object-key','local-file',{
  2. }


把上面获取的 var file 传入local-file就可以了, object-key是图片在阿里的路径,自己配置(string)




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章