使用阿里雲OSS JavaScript SDK上傳圖片
博客里看：https://www.zjhuiwan.cn/info/20200603/4012062473071713.html
html代碼:
<input type='file' accept=\"image/*\" name='option' onchange='uploadPic(this)' style='width: 80%;margin-right: 12px;'/>
JS代碼
<!-- 引入在線資源 -->
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-5.3.0.min.js"></script>
<script type="text/javascript">
var client = new OSS.Wrapper({
region: 'oss-cn-hangzhou',
accessKeyId: 'xxxxxxx',
secure:true,
accessKeySecret: 'xxxxxxx',
bucket: 'xxx'
});
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) {
console.log(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;
}
</script>
以上為js上傳圖片的完整代碼
參數備注:
accessKeyId：連接阿里雲的accessKeyId
accessKeySecret：連接阿里雲的accessKeyScret
dir：文件夾的名稱
bucketName：阿里雲bucketName的名稱
file：文件流
timestamp()根據年月日時分秒生產文件名
------------------------------------------------------------------------------
region：“xxx” //oss區域
accessKeySecret：連接阿里雲的accessKeyScret
dir：文件夾的名稱
bucket：阿里雲oss的名稱
返回結果:
最后拼接路徑：
imgurl="https://"+bucket+".oss-cn-hangzhou.aliyuncs.com/"+ result.name;
遇到的幾個問題：
跨域問題
解決辦法：阿里雲oss設置跨域訪問
OSS 提供 HTML5 協議中的跨域資源共享 CORS 設置，幫助您實現跨域訪問。當 OSS 收到一個跨域請求（或者 OPTIONS 請求）時，會讀取存儲空間對應的 CORS 規則，然后進行相應的權限檢查。OSS 會依次檢查每一條規則，使用第一條匹配的規則來允許請求並返回對應的 header。如果所有規則都匹配失敗，則不附加任何 CORS 相關的 header。
-
進入 OSS 管理控制台 界面。
-
在左側存儲空間列表中，單擊目標存儲空間名稱，打開該存儲空間概覽頁面。
-
單擊 基礎設置 頁簽，找到 跨域設置 區域，然后單擊 設置。
-
單擊 創建規則，打開 設定跨域規則 對話框。
-
設置跨域規則。
-
來源：指定允許的跨域請求的來源。允許多條匹配規則，以回車為間隔。每個匹配規則允許使用最多一個“*”通配符。
-
允許 Methods：指定允許的跨域請求方法。
-
允許 Headers：指定允許的跨域請求 header。允許多條匹配規則，以回車為間隔。每個匹配規則使用最多一個“*”通配符。
-
暴露 Headers：指定允許用戶從應用程序中訪問的響應頭（例如一個 Javascript 的 XMLHttpRequest 對象)。
-
緩存時間：指定瀏覽器對特定資源的預取（OPTIONS）請求返回結果的緩存時間。
說明： 每個存儲空間最多可以配置 10 條規則。
-
單擊 確定。
InvalidPartError400報錯
解決辦法：阿里雲oss設置跨域訪問時給暴露 Headers添加Etag
RequestError: XHR error (req "error"), POST http://xxx.xxx/uploa......報錯
解決辦法：在配置中加入secure:true
var client = new OSS.Wrapper({
region : 'oss-cn-hanghzou',
secure:true,//*這句話很重要！！！！！！！！！
accessKeyId : 'xxx',
accessKeySecret : 'xxx',
bucket : 'xxx'
});