ソースを参照

商城上传改版

1
mo 2 年 前
コミット
bc4b719699
2 ファイル変更45 行追加29 行削除
  1. 14 11
      src/components/Upload/multiUpload.vue
  2. 31 18
      src/components/Upload/singleUpload.vue

+ 14 - 11
src/components/Upload/multiUpload.vue

@@ -2,7 +2,7 @@
    
   <div>
     <el-upload
-    :disabled="disabled"
+      :disabled="disabled"
       :action="ossUploadUrl"
       :data="useOss ? dataObj : null"
       list-type="picture-card"
@@ -34,10 +34,14 @@ export default {
       type: Number,
       default: 5,
     },
-        disabled:{
-      type:Boolean,
-      default:false
-    }
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    bucket_name: {
+      type: String,
+      default: "mall",
+    },
   },
   data() {
     return {
@@ -53,7 +57,7 @@ export default {
       dialogVisible: false,
       dialogImageUrl: null,
       useOss: true, //使用oss->true;使用MinIO->false
-      ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/daya",
+      ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/"+this.bucket_name,
       minioUploadUrl: "http://localhost:8080/minio/upload",
     };
   },
@@ -89,9 +93,10 @@ export default {
       }
       return new Promise((resolve, reject) => {
         // console.log(file, "file");
-         let key = new Date().getTime()+file.name
+        let key = new Date().getTime() + file.name;
         let obj = {
           filename: file.name,
+          bucketName:this.bucket_name,
           postData: {
             filename: file.name,
             acl: "public-read",
@@ -112,13 +117,11 @@ export default {
               KSSAccessKeyId: response.data.kssAccessKeyId,
               policy: response.data.policy,
               signature: response.data.signature,
-              bucket_name: "daya",
               key: key,
               acl: "public-read", //此处需要与policy中的acl值保持一致,默认值:private。
-              uploadDomain: "https://ks3-cn-beijing.ksyuncs.com/daya", //北京region
+              uploadDomain: "https://ks3-cn-beijing.ksyuncs.com/"+this.bucket_name, //北京region
               autoStart: true,
             };
-            console.log(ks3Options, "ks3Options");
             var pluploadOptions = {
               drop_element: document.body,
             };
@@ -132,7 +135,7 @@ export default {
       });
     },
     handleUploadSuccess(res, file) {
-        let url = this.ossUploadUrl+'/'+ this.dataObj.key
+      let url = this.ossUploadUrl + "/" + this.dataObj.key;
       if (!this.useOss) {
         //不使用oss直接获取图片路径
         url = res.data.url;

+ 31 - 18
src/components/Upload/singleUpload.vue

@@ -2,7 +2,7 @@
    
   <div>
     <el-upload
-    :disabled="disabled"
+      :disabled="disabled"
       :action="ossUploadUrl"
       :data="useOss ? dataObj : null"
       list-type="picture"
@@ -30,10 +30,14 @@ export default {
   name: "singleUpload",
   props: {
     value: String,
-    disabled:{
-      type:Boolean,
-      default:false
-    }
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    bucket_name: {
+      type: String,
+      default: "mall",
+    },
   },
   computed: {
     imageUrl() {
@@ -71,12 +75,12 @@ export default {
         key: "",
         KSSAccessKeyId: "",
         // dir: "",
-        acl:'public-read',
-        name:'',
+        acl: "public-read",
+        name: "",
       },
       dialogVisible: false,
       useOss: true, //使用oss->true;使用MinIO->false
-      ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/daya",
+      ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/"+ this.bucket_name,
       minioUploadUrl: "http://localhost:8080/minio/upload",
     };
   },
@@ -96,13 +100,22 @@ export default {
         //不使用oss不需要获取策略
         return true;
       }
-      console.log(file,'掉用beforeUpload');
+      console.log(file, "掉用beforeUpload");
 
       return new Promise((resolve, reject) => {
-        let key = new Date().getTime()+file.name
+        let key = new Date().getTime() + file.name;
         // let key = `20150115/${file.name}`
-        let obj = {filename:file.name,postData:{'filename':file.name, "acl":"public-read","key":key,unknowValueField:[]}}
-        console.log(obj,'obj')
+        let obj = {
+          filename: file.name,
+          bucketName:this.bucket_name,
+          postData: {
+            filename: file.name,
+            acl: "public-read",
+            key: key,
+            unknowValueField: [],
+          },
+        };
+
         policy(obj)
           .then((response) => {
             _self.dataObj.policy = response.data.policy;
@@ -110,7 +123,7 @@ export default {
             _self.dataObj.KSSAccessKeyId = response.data.kssAccessKeyId;
             _self.dataObj.key = key;
             _self.dataObj.name = file.name;
-             _self.dataObj.acl = 'public-read'
+            _self.dataObj.acl = "public-read";
 
             // _self.dataObj.host = response.data.host;
             // _self.dataObj.callback = response.data.callback;
@@ -119,18 +132,18 @@ export default {
               KSSAccessKeyId: response.data.kssAccessKeyId,
               policy: response.data.policy,
               signature: response.data.signature,
-              bucket_name: "daya",
+
               key: key,
               acl: "public-read", //此处需要与policy中的acl值保持一致,默认值:private。
-              uploadDomain: "https://ks3-cn-beijing.ksyuncs.com/daya", //北京region
+              uploadDomain: "https://ks3-cn-beijing.ksyuncs.com/"+this.bucket_name, //北京region
               autoStart: true,
             };
-                  console.log(ks3Options,'ks3Options')
+            console.log(ks3Options, "ks3Options");
             var pluploadOptions = {
               drop_element: document.body,
             };
             var tempUpload = new ks3FileUploader(ks3Options);
-                  //  tempUpload.uploader.start()
+            //  tempUpload.uploader.start()
             resolve(true);
           })
           .catch((err) => {
@@ -140,7 +153,7 @@ export default {
       });
     },
     handleUploadSuccess(res, file) {
-      let url = this.ossUploadUrl+'/'+ this.dataObj.key
+      let url = this.ossUploadUrl + "/" + this.dataObj.key;
       this.showFileList = true;
       this.fileList.pop();
       if (!this.useOss) {