test: 阿里云oss

src/api/aliyunoss.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+export default {
+  // 获取分享者信息
+  getAppToken: function(params) {
+    return request({
+      url: 'oss/aliyun/getAppToken',
+      method: 'get',
+      params
+    })
+  },
+}

src/views/fileType/testoss.vue

@@ -5,6 +5,8 @@
 <script>
 
 import OSS from "ali-oss"
+
+import aliyunOSSApi from "@/api/aliyunoss";
 export default {
   name: "testoss",
   data() {
@@ -19,51 +21,40 @@ export default {
     }
   },
   mounted() {
+    this.getAccessToken()
     let that = this
     document.getElementById('file').addEventListener('change', function (e) {
       let file = e.target.files[0];
       let storeAs = file.name;
       console.log(file.name + ' => ' + storeAs);
-      // OSS.urllib是SDK内部封装的发送请求的逻辑，开发者可以使用任何发送请求的库向sts-server发送请求。
+      let client = new OSS({
-      OSS.urllib.request(that.stsServerUrl, {method: 'GET'}, (err, response) => {
+        accessKeyId: that.accessToken.AccessKeyId,
-        if (err) {
+        accessKeySecret: that.accessToken.AccessKeySecret,
-          return alert(err);
+        stsToken: that.accessToken.SecurityToken,
-        }
+        endpoint: 'oss-cn-guangzhou.aliyuncs.com',
-        try {
+        bucket: 'jmalcloud',
-          this.accessToken = JSON.parse(response);
+        internal: true,
-        } catch (e) {
+        cname: false,
-          return alert('parse sts response info error: ' + e.message);
+        secure: true,
-        }
+        refreshSTSToken: async () => this.refreshToken()
-        let client = new OSS({
+      });
-          accessKeyId: this.accessToken.AccessKeyId,
+      // storeAs可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
-          accessKeySecret: this.accessToken.AccessKeySecret,
+      // file可以自定义为File对象、Blob数据以及OSS Buffer。
-          stsToken: this.accessToken.SecurityToken,
+      client.multipartUpload(storeAs, file).then(function (result) {
-          endpoint: 'oss-cn-guangzhou.aliyuncs.com',
+        console.log(result);
-          bucket: 'jmalcloud',
+      }).catch(function (err) {
-          internal: true,
+        console.log(err);
-          cname: false,
-          secure: true,
-          refreshSTSToken: async () => this.refreshToken()
-        });
-        // storeAs可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
-        // file可以自定义为File对象、Blob数据以及OSS Buffer。
-        client.multipartUpload(storeAs, file).then(function (result) {
-          console.log(result);
-        }).catch(function (err) {
-          console.log(err);
-        });
       });
     });
   },
   methods: {
+    getAccessToken() {
+      aliyunOSSApi.getAppToken().then((res) => {
+        this.accessToken = res.data
+      })
+    },
     async refreshToken() {
-      // 向您搭建的STS服务获取临时访问凭证。
+      this.getAccessToken()
-      const info = await fetch(this.stsServerUrl);
-      return {
-        accessKeyId: info.AccessKeyId,
-        accessKeySecret: info.AccessKeySecret,
-        stsToken: info.SecurityToken
-      }
     }
   }
 }