javascript手機移動端微信拍照錄音錄視訊並阿里oss上傳

keller.zhou發表於2018-03-07
JavaScript阿里

呼叫照相機，拍照 

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

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


把上面獲取的 var file 傳入local-file就可以了， object-key是圖片在阿里的路徑，自己配置（string）

















相關文章