feat!: 可以通过action直接请求上传接口，并移除key与secret的注入 (#119)

Author: donaldshen

.eslintrc.js

@@ -9,11 +9,12 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
+    'plugin:jest/recommended',
     'plugin:vue/recommended',
     'plugin:prettier/recommended',
     'prettier/vue'
   ],
-  plugins: ['vue', 'prettier'],
+  plugins: ['vue', 'prettier', 'jest'],
   rules: {
     'no-console': [
       'error',

docs/http-request.md renamed to docs/request.md

@@ -2,7 +2,7 @@
 
 ```vue
 <template>
-	<upload-to-ali multiple v-model="url" :http-request="myUpload" />
+	<upload-to-ali multiple v-model="url" :request="myUpload" />
 </template>
 
 <script>
@@ -23,4 +23,4 @@ export default {
   }
 }
 </script>
-```
+```

package.json

@@ -36,8 +36,9 @@
   },
   "dependencies": {
     "@femessage/img-preview": "^1.2.0",
-    "ali-oss": "^6.0.1",
-    "image-compressor.js": "^1.1.4"
+    "compressorjs": "^1.0.6",
+    "crypto-browserify": "^3.12.0",
+    "eslint-plugin-jest": "^23.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",

src/upload-to-ali.vue

@@ -83,14 +83,11 @@
 </template>
 
 <script>
-import AliOSS from 'ali-oss'
 import ImgPreview from '@femessage/img-preview'
-import ImageCompressor from 'image-compressor.js'
+import Compressor from 'compressorjs'
 import DraggableList from './components/draggable-list.vue'
 import UploadItem from './components/upload-item.vue'
-import {encodePath} from './utils'
-
-const imageCompressor = new ImageCompressor()
+import {getSignature} from './utils'
 
 const oneKB = 1024
 
@@ -108,20 +105,11 @@ export default {
   },
   props: {
     /**
-     * 阿里云控制台创建的access key
-     * 使用前请务必设置跨域 及 ACL
-     * @link https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.920.9ddd5557vJ6QU7
-     */
-    accessKeyId: {
-      type: String,
-      default: process.env.OSS_KEY
-    },
-    /**
-     * 阿里云控制台创建的access secret
+     * 上传地址
      */
-    accessKeySecret: {
+    action: {
       type: String,
-      default: process.env.OSS_SECRET
+      default: process.env.UPLOAD_ACTION
     },
     /**
      * 存储空间的名字
@@ -207,7 +195,7 @@ export default {
       validator: val => val > 0
     },
     /**
-     * 图片压缩参数，请参考：https://www.npmjs.com/package/image-compressor.js#options
+     * 图片压缩参数，请参考：https://www.npmjs.com/package/compressorjs#options
      */
     compressOptions: {
       type: Object,
@@ -225,7 +213,7 @@ export default {
       })
     },
     /**
-     * 是否开启预览功能，需要全局注册img-preview组件
+     * 是否开启预览功能，需要全局注册 img-preview 组件
      */
     preview: {
       type: Boolean,
@@ -274,50 +262,40 @@ export default {
     },
 
     /**
-     * 自定义上传, 使用此函数则不采用默认 AliOSS 上传行为
+     * 自定义上传, 使用此函数则会覆盖默认的上传行为
      * 返回 Promise, 接收 resolve 参数为 url
      */
-    httpRequest: {
+    request: {
       type: Function,
-      async default(file) {
-        const {name} = file
-        //文件名-时间戳 作为上传文件key
-        const pos = name.lastIndexOf('.')
-        const key =
-          pos === -1
-            ? `${name}-${Date.now()}`
-            : `${name.slice(0, pos)}-${Date.now()}${name.slice(pos)}`
-        const client = this.newClient()
-        try {
-          const res = await client.multipartUpload(
-            this.dir + key,
-            file,
-            this.uploadOptions
-          )
-          // 协议无关
-          let url
-          // 上传时阿里 OSS 会对文件名 encode，但 res.name 没有 encode
-          // 因此要 encode res.name，否则会因为文件名不同，导致 404
-          const filename = encodePath(res.name)
-          if (this.customDomain) {
-            if (this.customDomain.indexOf('//') > -1)
-              url = `${this.customDomain}/${filename}`
-            else {
-              url = `//${this.customDomain}/${filename}`
+      default(file) {
+        const formData = new FormData()
+        ;['bucket', 'region', 'customDomain', 'dir']
+          .filter(key => this[key])
+          .forEach(key => formData.append(key, this[key]))
+        formData.append('file', file)
+
+        return new Promise((resolve, reject) => {
+          const xhr = new XMLHttpRequest()
+          xhr.responseType = 'json'
+          xhr.onload = () => {
+            if (xhr.status === 200) {
+              resolve(xhr.response.payload.url)
+            } else {
+              reject(xhr.response)
             }
-          } else {
-            url = `//${this.bucket}.${this.region}.aliyuncs.com/${filename}`
-          }
-          return url
-        } catch (error) {
-          if (client.isCancel()) {
-            /**
-             * 上传操作被取消事件
-             */
-            this.$emit('cancel')
           }
-          throw error
-        }
+          xhr.onerror = reject
+          const timestamp = Date.now()
+          const sep = this.action.indexOf('?') > -1 ? '&' : '?'
+          const url = `${this.action}${sep}_=${timestamp}`
+          xhr.open('POST', url, true)
+
+          const signature = getSignature(location.origin, timestamp)
+          xhr.setRequestHeader('x-upload-timestamp', timestamp)
+          xhr.setRequestHeader('x-upload-signature', signature)
+
+          xhr.send(formData)
+        })
       }
     }
   },
@@ -351,25 +329,6 @@ export default {
     }
   },
   methods: {
-    newClient() {
-      const missingKey = [
-        'region',
-        'bucket',
-        'accessKeyId',
-        'accessKeySecret'
-      ].find(k => !this[k])
-      if (missingKey) {
-        throw new Error(`必要参数不能为空: ${missingKey}`)
-      }
-
-      // https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.801.LllSVA
-      return new AliOSS({
-        region: this.region,
-        bucket: this.bucket,
-        accessKeyId: this.accessKeyId,
-        accessKeySecret: this.accessKeySecret
-      })
-    },
     onDelete(url, index) {
       const result = this.multiple ? this.uploadList.filter(v => v !== url) : ''
       this.$emit('input', result)
@@ -447,18 +406,26 @@ export default {
       const max = this.multiple ? this.max : 1
       for (let i = 0; i < files.length && this.uploadList.length < max; i++) {
         // 尝试压缩文件
-        const file = enableCompressRegex.test(files[i].type)
-          ? await imageCompressor.compress(files[i], this.compressOptions)
-          : files[i]
-
+        let file = files[i]
+        if (enableCompressRegex.test(file.type)) {
+          const blob = await new Promise((resolve, reject) => {
+            new Compressor(file, {
+              ...this.compressOptions,
+              success: resolve,
+              error: reject
+            })
+          })
+          /* eslint-disable-next-line require-atomic-updates */
+          file = new File([blob], file.name)
+        }
         /**
          * 上传过程中
          * @property {string} name - 当前上传的图片名称
          */
         this.$emit('loading', file.name)
 
         try {
-          const url = await this.httpRequest(file)
+          const url = await this.request(file)
           if (typeof url !== 'string' || !/^(https?:)?\/\//.test(url)) {
             throw new Error(
               `\`Promise.resolve\` 接收的参数应该是超链接(url), 当前为 ${typeof url}.`
@@ -468,17 +435,10 @@ export default {
           currentUploads.push(url)
         } catch (error) {
           console.warn(error.message)
-          if (error.code === 'ConnectionTimeoutError') {
-            /**
-             * 上传超时
-             */
-            this.$emit('timeout')
-          } else {
-            /**
-             * 上传失败
-             */
-            this.$emit('fail')
-          }
+          /**
+           * 上传失败
+           */
+          this.$emit('fail')
         }
       }
 

src/utils.js

@@ -1,8 +1,25 @@
-export function encodePath(url) {
-  return url
-    .split('/')
-    .map(str => encodeURIComponent(str))
-    .join('/')
+import crypto from 'crypto-browserify'
+
+/**
+ * 签名函数参考
+ * https://help.aliyun.com/document_detail/29442.html?spm=a2c4g.11186623.2.13.2c541605Ky1bxj
+ */
+export function getSignature(origin, timestamp) {
+  const param = {
+    origin,
+    timestamp,
+    signatureMethod: 'HMAC-SHA1'
+  }
+  const paramStr = Object.keys(param)
+    .sort()
+    .map(k => `${k}=${encodeURIComponent(param[k])}`)
+    .join('&')
+  const signStr = 'POST&%2F&' + encodeURIComponent(paramStr)
+
+  return crypto
+    .createHmac('sha1', 'nonce')
+    .update(signStr)
+    .digest('base64')
 }
 
 export function getBasename(url = '') {

styleguide.config.js

@@ -2,8 +2,7 @@ const {VueLoaderPlugin} = require('vue-loader')
 const path = require('path')
 const glob = require('glob')
 const env = Object.assign({}, require('dotenv').config().parsed, {
-  OSS_KEY: process.env.OSS_KEY,
-  OSS_SECRET: process.env.OSS_SECRET,
+  UPLOAD_ACTION: process.env.UPLOAD_ACTION,
   OSS_BUCKET: process.env.OSS_BUCKET,
   OSS_REGION: process.env.OSS_REGION
 })

test/utils.test.js

@@ -1,4 +1,4 @@
-import {getBasename, encodePath} from '../src/utils'
+import {getBasename, getSignature} from '../src/utils'
 
 describe('getBasename', () => {
   test('仅存在文件名', () => {
@@ -23,9 +23,15 @@ describe('getBasename', () => {
   })
 })
 
-describe('encodePath', () => {
-  test('文件名带有特殊字符的文件地址', () => {
-    const url = '//example+1-1563433997757.jpg'
-    expect(encodePath(url)).toBe('//example%2B1-1563433997757.jpg')
+describe('getSignature', () => {
+  test('用例一', () => {
+    const origin = 'http://localhost:6060'
+    const timestamp = 1575362612539
+    expect(getSignature(origin, timestamp)).toBe('VBrn5MJFxMj5OPExLx8eXq1DCCc=')
+  })
+  test('用例二', () => {
+    const origin = 'https://example.com'
+    const timestamp = 1575362612539
+    expect(getSignature(origin, timestamp)).toBe('iZj/mMZghtdi1jyk9zqG8mYiKPo=')
   })
 })