1. 程式人生 > 其它 >layui使用OSS上傳

layui使用OSS上傳

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("檔案上傳失敗"); } }); }