更换oss 图片上传的方式为sts

src/components/byh/componments/AddQuestion.vue

@@ -45,17 +45,17 @@
 
       <el-form-item label="相关凭证"  required>
         <el-upload
+            :file-list="fileList"
             class="upload-demo"
-            action=""
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :before-remove="beforeRemove"
-            multiple
-            :limit="3"
-            :http-request="handleUpload"
-            :on-exceed="handleExceed"
-            :file-list="fileList">
-          <el-button size="small" type="primary">点击上传</el-button>
+            list-type="picture-card"
+            :action="oss.action"
+            :data="oss.data"
+            :multiple="oss.multiple"
+            accept=".jpeg,.jpg,.png"
+            :http-request="uploadSectionFile"
+            :before-upload="handleBeforeApplyUpload"
+            :on-remove="handleLoanApplyRemove">
+          <i class="el-icon-plus"></i>
         </el-upload>
       </el-form-item>
 
@@ -70,6 +70,7 @@
 
 <script type="text/ecmascript-6">
 
+import Axios from 'axios'
 
 export default {
   name: 'AddUserServiceDialog',
@@ -95,13 +96,13 @@ export default {
       },
       visible: this.$props.dialogVisible,
       ruleForm: {
-        feedNo:'',
+        feedNo: '',
         feedType: '',
         feedStatus: '',
         feedContent: '',
         clientNo: '',
         creater: '',
-        loanNo:'',
+        loanNo: '',
         productName: '',
         feedVoucher: []
       },
@@ -114,7 +115,7 @@ export default {
         ],
         feedContent: [
           {required: true, message: '请输入反馈问题描述', trigger: 'blur'}
-        ]
+        ],
       },
       optionsStatus: [
         {
@@ -156,13 +157,19 @@ export default {
           label: '其它'
         }
       ],
+      oss: {
+        action: '',
+        data: {},
+        multiple: false,
+      },
+      file: null
     }
   },
   created() {
-    console.log(this.params,'888888888888');
-    const {clientNo, feedNo, feedType,feedStatus,feedContent,feedVoucher, feedProduct,loanNo} = this.params;
+    console.log(this.params, '888888888888');
+    const {clientNo, feedNo, feedType, feedStatus, feedContent, feedVoucher, feedProduct, loanNo} = this.params;
     const list = [];
-    feedVoucher.forEach(item=>{
+    feedVoucher.forEach(item => {
       const o = {};
       o.name = item;
       o.url = item;
@@ -185,60 +192,75 @@ export default {
     }
 
   },
-  mounted() {
-    this.client = new OSS({
-      region: 'oss-cn-hangzhou',
-      accessKeyId: 'LTAI5tGDFPU1dnToV9jAatw1',
-      accessKeySecret: 'gHW0vHhSDh3GVis8H1dT5kkDJVldRJ',
-      bucket: 'w-loan-static'
-    });
-  },
   methods: {
-    handleUpload(file) {
-      this.upload(file)
+    handleBeforeApplyUpload(file) {
+      const attachType = 'LOESS_TRANSFER_APPLY';
+      return this.$$get(`/oss/signature/?fileType=` + attachType + "&fileName=" + file.name).then(res => {
+        if (res.data.code !== '200') {
+          this.$message.error(res.data.message);
+          return false
+        }
+        const result = res.data.result.result;
+        const data = {};
+        const tempOss = {};
+        data.OSSAccessKeyId = result.accessId;
+        data.policy = result.policy;
+        data.Signature = result.signature;
+        data.key = result.dir;
+        tempOss.action = result.host;
+        tempOss.data = data;
+        this.oss = tempOss;
+      });
     },
 
-    upload(file) {
-      console.log(file, '文件')
-      const key = file.file.name;
-      const client = this.client;
-      const that = this;
-      const timeNum=new Date().getTime();
-      client.multipartUpload('customer/feed/' +timeNum+'-'+key, file.file)
-          .then((res) => {
-            console.log(res, '返回结果');
-            const fileList = that.fileList;
-
-            const imgSrc = `https://file.jqtianxia.com/${res.name}`;
-            const o = {name: res.name, url: imgSrc};
-            fileList.push(o);
-
-            that.$message.success('上传成功');
+
+    uploadSectionFile(params) {
+      const {action, data} = this.oss
+      console.log(params, '图片信息')
+      const d = new FormData();
+      d.append("key", data.key);
+      d.append("policy", data.policy);
+      d.append("OSSAccessKeyId", data.OSSAccessKeyId);
+      d.append("success_action_status", "200");
+      d.append("Signature", data.Signature);
+      d.append("file", params.file);
+      const baseUrl = action;
+
+
+      Axios({
+        url: baseUrl,
+        method: 'post',
+        data: d,
+        headers: {'Content-Type': 'multipart/form-data'}
+      }).then((res) => {
+        if (res.status === 200) {
+          const imgUrl = `${baseUrl}/${data.key}`;
+          this.$notify({title: '成功', message: params.file.name + ",上传成功", type: 'success'});
+          this.fileList.push({
+            name: params.file.name,
+            url: imgUrl
           })
-          .catch((err) => {
-            console.log(err, '错误信息');
-            this.$message.error('上传失败');
+        }
+      }).catch((e) => {
+        console.log(e, '错误')
       });
     },
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-      this.fileList = fileList;
-    },
-    handlePreview(file) {
-      console.log(file);
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+
+
+    handleLoanApplyRemove(file, fileList) {
+      console.log(file, 'r2')
+      console.log(fileList, 'r3')
     },
-    beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`);
+
+    httpRequest() {
+
     },
 
     /** 提交点击 */
     submitForm() {
-      console.log(this.fileList,'文件列表');
+      console.log(this.fileList, '文件列表');
       const feedVoucher = [];
-      this.fileList.forEach(item=>{
+      this.fileList.forEach(item => {
         feedVoucher.push(item.url);
       })
 
@@ -246,9 +268,9 @@ export default {
         if (!valid) {
           return false
         }
-        if(this.ruleForm.feedNo){
+        if (this.ruleForm.feedNo) {
           this.$$post('/feed/updateClientFeed', {
-            feedNo:this.ruleForm.feedNo,
+            feedNo: this.ruleForm.feedNo,
             feedType: this.ruleForm.feedType,
             feedSource: 'CUSTOMER',
             feedStatus: this.ruleForm.feedStatus,
@@ -264,7 +286,7 @@ export default {
                   this.$message({message: '反馈问题修改成功', type: 'success'});
                   this.$emit('callback')
                   this.handleClose();
-                }else {
+                } else {
                   this.$message.error(res.data.message);
                 }
 
@@ -272,7 +294,7 @@ export default {
               .catch(err => {
                 alert("error!")
               })
-        }else{
+        } else {
           this.$$post('/feed/createClientFeed', {
             creater: localStorage.getItem("userName"),
             feedType: this.ruleForm.feedType,
@@ -289,7 +311,7 @@ export default {
                   this.$message({message: '反馈问题新增成功', type: 'success'});
                   this.$emit('callback')
                   this.handleClose();
-                }else {
+                } else {
                   this.$message.error(res.data.message);
                 }
 
@@ -300,7 +322,6 @@ export default {
         }
 
 
-
       })
 
     },