前端上傳文件至阿里雲

前端上傳文件至阿里雲

1、html

<input type="file" name="picFieldName" id="picFieldId" onchange="uploadPic(this)" />

 

2、js

　　var client = new OSS.Wrapper({
        region: 'oss-cn-beijing',
        accessKeyId: 'X8Tartapp0w0VNj6ZrMej4',
        accessKeySecret: 'VziKartappfO9oXMINPnvzaJNcgcvE0mYWCq',
        bucket: 'artapp-dev-bucket'
    });
    function uploadPic(obj){
        var file=obj.files[0];//獲取文件流
        var val= obj.value;
        var suffix = val.substr(val.indexOf("."));
        var storeAs = "studio_course/"+timestamp()+suffix;
        console.log(file.name + ' => ' + storeAs);
        client.multipartUpload(storeAs, file).then(function (result) {

        }).catch(function (err) {
            console.log(err);
        });
    }


    /**
     * 生成文件名
     * @returns
     */
    function timestamp(){
        var time = new Date();
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        console.log(y);
        return ""+y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s);
    }
    function add0(m){
        return m<10?'0'+m : m;
    }

參數備注:

　　accessKeyId：連接阿里雲的accessKeyId

　　accessKeySecret：連接阿里雲的accessKeyScret

　　dir：文件夾的名稱

　　bucketName：阿里雲bucketName的名稱

　　file：文件流

timestamp()根據年月日時分秒生產文件名
------------------------------------------------------------------------------

 region：“xxx” //oss區域

　　accessKeySecret：連接阿里雲的accessKeyScret

　　dir：文件夾的名稱

　　bucket：阿里雲oss的名稱

3、走2次才算上傳成功

       

 

 

　　　

 4、走2次才算上傳成功

 　　　

 

 

　　　　

5、地址貼出來可訪問