upload

package.json

@@ -33,6 +33,7 @@
     "@antv/f2": "3.4.3",
     "@babel/preset-env": "^7.4.5",
     "@babel/runtime": "^7.7.6",
+    "ali-oss": "^6.7.0",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",

src/libs/aliOss.js

+import Util from './util';
+var OSS = require('ali-oss')
+
+export default {
+
+  /**
+   * 创建随机字符串
+   * @param num
+   * @returns {string}
+   */
+  randomString(num) {
+    const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
+    let res = ''
+    for (let i = 0; i < num; i++) {
+      var id = Math.ceil(Math.random() * 35)
+      res += chars[id]
+    }
+    return res
+  },
+
+  /**
+   * 创建oss客户端对象
+   * @returns {*}
+   */
+  createOssClient(bucket) {
+    return new Promise((resolve, reject) => {
+      const client = new OSS({
+        region: 'oss-cn-hangzhou',
+        accessKeyId: 'LTAI4FyZj7RNejbzssiWFGKW',
+        accessKeySecret: 'vEhYSgkxEwFHe5O2nRnzqUunXZjU9s',
+        bucket: bucket
+      })
+      resolve(client)
+    })
+  },
+  /**
+   * 生成uuid
+   */
+  uuid() {
+    var s = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+    s[8] = s[13] = s[18] = s[23] = "-";
+    var uuid = s.join("").replace("-","");
+    return uuid
+  },
+
+  /**
+   * 文件上传
+   * @param option 参考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139
+   */
+  ossUploadFile(option) {
+    const file = option.file
+    const self = this
+    
+    return new Promise((resolve, reject) => {
+      const extensionName = file.name.substr(file.name.indexOf('.')) // 文件扩展名
+      const fileName = `${option.sProjectNo}/${self.uuid()+extensionName}`
+      // 执行上传
+      self.createOssClient(option.bucket).then(client => {
+        // 异步上传,返回数据
+        resolve({
+          fileName: file.name,
+          fileUrl: fileName
+        })
+        // 上传处理
+        // 分片上传文件
+        client.multipartUpload(fileName, file, {
+            headers:{
+                'Content-Type': 'image/jpg'
+            },
+          progress: function(p) {
+            const e = {}
+            e.percent = Math.floor(p * 100)
+            // console.log('Progress: ' + p)
+            // option.onProgress(e)
+          }
+        }).then((val) => {
+          console.info(val,fileName)
+          if (val.res.statusCode === 200) {
+            console.log('seccess')
+            // option.onSuccess(val)
+            return val
+          } else {
+              console.log('error')
+            // option.onError('上传失败')
+          }
+        }, err => {
+            console.log(err)
+        //   option.onError('上传失败')
+          reject(err)
+        })
+      })
+    })
+  }
+}

src/view/tiip/uploadImg/index.vue

@@ -79,12 +79,12 @@
 
 <template>
     <div id="uploadImg">
-        <a href="javascript:;" class="file">
+        <a href="javascript:;" class="file" id="container">
             <div>
                 <i class='iconfont icon-jia1' id="phone_icon"></i>
                 <span>上传图片</span>
             </div>
-            <input ref="upload" id="upload" type="file" accept="image/*">
+            <input ref="upload" id="selectfiles" type="file" accept="image/*" multiple>
         </a>
 
         <div class="uploaded">
@@ -104,6 +104,7 @@ import Util from '@/libs/util.js';
 import Axios from 'axios';
 var DOMParser = require('xmldom').DOMParser;
 import {Previewer , TransferDom} from 'vux';
+import oss from '@/libs/aliOss'
 
 export default {
   name: 'uploadImg',
@@ -135,6 +136,7 @@ export default {
     TransferDom
   },
   async mounted(){
+
     var that = window.d = this;
     this.query = this.$route.query;
     let url = `${this.query.sWebServiceURL}/projectpic/HS/${this.query.uGUID}.jpg`.replace(/\w+\.asmx\//,'');
@@ -177,6 +179,11 @@ export default {
                 })
                 return false;
             }
+            // oss.ossUploadFile({bucket:'huansi',sProjectNo:'HSTIP',file:file.files[0]}).then(file => {
+            //     console.log(file)
+            // })
+            // return false;
+
             that.upload(reader.result);  //或者 e.target.result都是一样的，都是base64码
         }  
         reader.readAsDataURL(this.files[0]);