layui使用OSS上傳
阿新 • • 發佈:2022-05-17
1、首先要把aliyun-oss-sdk.js包下載下來,放到指定的目錄下面 在要用的頁面引入或者在index.html入口檔案全域性引入;
<script src="util/aliyun-oss-sdk.js"></script>
我是放到util檔案下面,在util裡建立公用js的檔案,在裡面編寫
getClient: function () { return new OSS.Wrapper({ region: 'oss-cn-shanghai', //你的oss地址 ,具體位置見下圖 accessKeyId: 'LTAIREJEnnClPTln', //你的ak accessKeySecret: '65B1DuHC2FslxxWjJXdhJyXSs7tMV5', //你的secret bucket: 'tmxkshop' //你的oss名字 }); },
2、在你要用的頁面這樣寫:
var client = util.getClient(); var loading = null; $("#txtFile_up_follow").on("change", function () { if (this.files.length > 1) return layer.msg("只能上傳一張圖片");for (var i = 0; i < this.files.length; i++) { var extensionName = this.files[i].name.substr( this.files[i].name.lastIndexOf(".") ); // 副檔名 if ( !( extensionName === ".png" || extensionName === ".jpg" || extensionName === ".jpeg" ) )return layer.msg("請上傳png或jpg或jpeg格式圖片"); } loading = layer.load(2); for (var i = 0; i < this.files.length; i++) { clientUpload(this.files[i], this.files.length); } }); function clientUpload(fileItem, fileLength) { arr = []; //每重新上傳之前 清空arr var datetoday = util.getTodayDate(); var randomStr = "/" + new Date().getTime() + util.randomString(4); // 4位隨機字串 var extensionName = fileItem.name.substr(fileItem.name.lastIndexOf(".")); // 副檔名 var fileName = "image/" + datetoday + randomStr + extensionName; // 檔名字(相對於根目錄的路徑 + 檔名) client.multipartUpload(fileName, fileItem).then(function (result) { if (result.res.status === 200) { arr.push(result.res.requestUrls[0].split("?")[0].replace('http', 'https')); if (arr.length >= fileLength) { $(".accPic").attr("src", arr[0]); $("input[name='url']").val(arr[0]); $(".showImg").show(); } else { $(".showImg").hide(); } layer.close(loading); } else { layer.msg("檔案上傳失敗"); } }); }