作品附件-调试6

components/works/editor.vue

@@ -30,8 +30,11 @@
 
     <div class="app__mt_20">
       <el-upload class="app__fc_308EFF app__fs_13 app__bd_a_308EFF app__w_120 app__h_35 app__ta_c app__lh_35 app_br_2" style="display:inline-block"
-                 action="/file/prepareUpload" :data="fileUploadParams" :before-upload="beforeUpload"
-                 :on-success="handleSuccess">点击添加
+                 action="#"
+                 :before-upload="beforeUpload"
+                 :on-success="handleSuccess"
+                 :on-change="handleWorkFileChange"
+      >点击添加6
       </el-upload>
       <span class="app__fs_13 app__fc_999 app__ml_15">文件小于1GB，请勿上传侵权内容作品</span>
     </div>
@@ -47,6 +50,11 @@
   import editor from "@/components/editor";
   import multiUploader from '@/components/multi-uploader';
 
+  let OSS = require('ali-oss');
+
+
+  import axios from "axios";
+
   export default {
     head() {
       return {
@@ -83,6 +91,7 @@
         workImages: [],
         wid: "",
         fileUploadParams: {},
+        workFileUploadInfo: {}
       };
     },
     computed: {},
@@ -269,16 +278,65 @@
         console.log(this.fileUploadParams);
       },
       handleSuccess(response, file, fileList) {
+        console.log("handleSuccess");
         console.log(response);
         console.log(file);
         console.log(fileList);
 
         // this.$axios.post("/file/uploadCallback",)
       },
-      handleChange(e) {
-        console.log(e);
+      // handleChange(e) {
+      //   console.log(e);
+      // },
+      handleWorkFileChange(file, fileList) {
+        if (file.size / 1024 > 1024 * 1000) {
+          this.$message.error("作品大小不得超过1G，请重新选择");
+          return false;
+        }
+        const formData = new FormData();
+        let wid = this.$route.query.wid;
+        formData.append("target", `{ "type": 5 ,"work_id":${wid || -1}}`);
+        formData.append("filename", file.name);
+        this.$axios.$post(`/file/prepareUpload`, formData, {
+          headers: {"Content-Type": "multipart/form-data"}
+        }).then(data => {
+          console.log("data", data);
+          this.putObject(data.data, file);
+        });
+      },
+      putObject(data, file) {
+        try {
+          let client = OSS({
+            region: "oss-cn-beijing",
+            // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
+            accessKeyId: data.sts.Credentials.AccessKeyId,
+            accessKeySecret: data.sts.Credentials.AccessKeySecret,
+            bucket: data.post_params.bucket
+          });
+          // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
+          console.log("", client);
+          const blob = URL.createObjectURL(file.raw);
+          // console.log("blob:", this.toBlob(blob, file.raw.type));
+          client.put(data.post_params.policy['save-key'], file.raw).then(res => {
+            console.log(res);
+          }).catch(err => {
+            console.log(err);
+          });
+        } catch (e) {
+          console.log(e);
+        }
+      },
+      toBlob(urlData, fileType) {
+        let bytes = window.atob(urlData);
+        let n = bytes.length;
+        let u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bytes.charCodeAt(n);
+        }
+        return new Blob([u8arr], {type: fileType});
       }
-    }
+    },
+
   };
 </script>
 

package.json

@@ -21,6 +21,7 @@
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.1",
     "@nuxtjs/router": "^1.5.0",
+    "ali-oss": "^6.12.0",
     "babel-plugin-component": "^1.1.1",
     "better-scroll": "^2.0.0-beta.2",
     "clipboard": "^2.0.6",