add qiniu upload example

src/api/qiniu.js

@@ -1,28 +1,8 @@
-// import fetch, { tpFetch } from 'utils/fetch';
+import fetch from 'utils/fetch';
 
-// export function getToken() {
-//   return fetch({
-//     url: '/qiniu/upload/token',
-//     method: 'get'
-//   });
-// }
-// export function upload(data) {
-//   return tpFetch({
-//     url: 'https://upload.qbox.me',
-//     method: 'post',
-//     data
-//   });
-// }
-
-
-// /* 外部uri转七牛uri*/
-// export function netUpload(token, net_url) {
-//   const imgData = {
-//     net_url
-//   };
-//   return fetch({
-//     url: '/qiniu/upload/net/async',
-//     method: 'post',
-//     data: imgData
-//   });
-// }
+export function getToken() {
+  return fetch({
+    url: '/qiniu/upload/token', // 假地址 自行替换
+    method: 'get'
+  });
+}

src/views/qiniu/upload.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-upload
+      action="https://upload.qbox.me"
+      :data="dataObj"
+      drag
+      :multiple="true"
+      :before-upload="beforeUpload">
+    <i class="el-icon-upload"></i>
+    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+  </el-upload>
+</template>
+
+
+<script>
+    import { getToken } from 'api/qiniu'; // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
+    // 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
+
+    export default{
+      data() {
+        return {
+          dataObj: { token: '', key: '' },
+          image_uri: [],
+          fileList: []
+        }
+      },
+      methods: {
+        beforeUpload() {
+          const _self = this;
+          return new Promise((resolve, reject) => {
+            getToken().then(response => {
+              const key = response.data.qiniu_key;
+              const token = response.data.qiniu_token;
+              _self._data.dataObj.token = token;
+              _self._data.dataObj.key = key;
+              resolve(true);
+            }).catch(err => {
+              console.log(err)
+              reject(false)
+            });
+          });
+        }
+      }
+    }
+</script>