前端上傳文件至阿里雲

前端上傳文件至阿里雲

一、html

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

 

二、js

 1 　　var client = new OSS.Wrapper({
 2         region: 'oss-cn-beijing',
 3         accessKeyId: 'X8Tartapp0w0VNj6ZrMej4',
 4         accessKeySecret: 'VziKartappfO9oXMINPnvzaJNcgcvE0mYWCq',
 5         bucket: 'artapp-dev-bucket'
 6     });
 7     function uploadPic(obj){
 8         var file=obj.files[0];//獲取文件流
 9         var val= obj.value;
10         var suffix = val.substr(val.indexOf("."));
11         var storeAs = "studio_course/"+timestamp()+suffix;
12         console.log(file.name + ' => ' + storeAs);
13         client.multipartUpload(storeAs, file).then(function (result) {
14 
15         }).catch(function (err) {
16             console.log(err);
17         });
18     }
19 
20 
21     /**
22      * 生成文件名
23      * @returns
24      */
25     function timestamp(){
26         var time = new Date();
27         var y = time.getFullYear();
28         var m = time.getMonth()+1;
29         var d = time.getDate();
30         var h = time.getHours();
31         var mm = time.getMinutes();
32         var s = time.getSeconds();
33         console.log(y);
34         return ""+y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s);
35     }
36     function add0(m){
37         return m<10?'0'+m : m;
38     }

參數備註:

　　accessKeyId：鏈接阿里雲的accessKeyId

　　accessKeySecret：鏈接阿里雲的accessKeyScret

　　dir：文件夾的名稱

　　bucketName：阿里雲bucketName的名稱

　　file：文件流

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

 region：「xxx」 //oss區域

　　accessKeySecret：鏈接阿里雲的accessKeyScret

　　dir：文件夾的名稱

　　bucket：阿里雲oss的名稱

三、走2次纔算上傳成功

       

 

 

　　　

 四、走2次纔算上傳成功

 　　　

 

 

　　　　

五、地址貼出來可訪問