vue+element 實現阿里云OSS對象存儲

1.安裝ali-oss

npm install ali-oss
  1. 引入ali-oss
let OSS = require('ali-oss');

3.upload組件上傳兩種方式
*注:阿里云服務器需配置跨域, API為后臺獲取簽名接口

//分片上傳
 imgChange (file, fileList) {
      let that = this
      let storeAs = 'upload-file' + '/' + file.name
      OSS.urllib.request("API", { method: 'GET' }, (err, response) => {
        if (err) {
          return alert(err);
        }
        let result = JSON.parse(response);
        let client = new OSS({
          accessKeyId: result.data.accessKeyId,
          accessKeySecret: result.data.accessKeySecret,
          stsToken: result.data.securityToken,
          // region表示您申請OSS服務所在的地域,例如oss-cn-hangzhou。
          // bucket文件保存路徑
          region: 'oss-cn-chengdu',
          bucket: 'liangchuang'
        });
        // storeAs可以自定義為文件名(例如file.txt)或目錄(例如abc/test/file.txt)的形式,實現將文件上傳至當前Bucket或Bucket下的指定目錄。
        // file可以自定義為File對象、Blob數據以及OSS Buffer。
        // 注意上傳的內容是file.raw,不是file
        client.multipartUpload(storeAs, file.raw).then(function (result) {
          let url = result.res.requestUrls[0]
          let str = url.substr(0, url.indexOf("?"))
          that.ruleForm.src = str
          if (that.ruleForm.type == 1) {
            that.ruleForm.imageUrl = str
          } else {
            that.ruleForm.videoUrl = str
          }
        }).catch(function (err) {
          console.log(err);
        });
      });
    },
function upload (file, type, size = 300) {
 let that = this
 if (file.size > 1024 * size) {
   Message({
     message: '圖片大小不能超過' + size + 'KB,請重新上傳',
     type: 'error',
     offset: 500
   })
   return ''
 }
 return new Promise((resolve, reject) => {
   var point = file.raw.name.lastIndexOf(".");
   OSS.urllib.request("API", { method: 'GET' }, (err, response) => {//獲取配置信息
     if (err) {
       return alert(err);
     }
     let result = JSON.parse(response);//獲取配置
     var name = file.raw.name.substr(point);
     let cdnDomain = result.data.cdnDomain
     let storeAs = result.data.path + '/' + Date.parse(new Date()) + name// 根據type和moduleId拼接目錄和文件名
     let client = new OSS({// 阿里云oss配置信息
       accessKeyId: result.data.accessKeyId,
       accessKeySecret: result.data.accessKeySecret,
       stsToken: result.data.securityToken,
       region: 'oss-cn-chengdu',
       bucket: result.data.bucketName
     });
     async function putObject () {
       try {
         let result = await client.put(storeAs, file.raw);
         result.cdnDomain = cdnDomain
         resolve(result);
       } catch (e) {
       }
     }
     putObject();
   });
 })
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。