From 46b6a6e19f4d713fdf42963bfcd9b232bab39995 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 2 Jun 2017 18:14:19 +0800
Subject: [PATCH] add qiniu upload example

---
 src/api/qiniu.js           | 34 ++++++-----------------------
 src/views/qiniu/upload.vue | 44 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 27 deletions(-)
 create mode 100644 src/views/qiniu/upload.vue

diff --git a/src/api/qiniu.js b/src/api/qiniu.js
index ce998a59..b2837f72 100644
--- a/src/api/qiniu.js
+++ b/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'
+  });
+}
diff --git a/src/views/qiniu/upload.vue b/src/views/qiniu/upload.vue
new file mode 100644
index 00000000..7250458b
--- /dev/null
+++ b/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>
-- 
GitLab