添加七牛上传

index.html

@@ -14,5 +14,6 @@
     <div id="app">
     	<router-view></router-view>
     </div>
+    <script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
   </body>
 </html>

src/utils/envConfig.js

@@ -14,26 +14,46 @@ export const envConfig = {
     // webPageUrl: 'https://test1-phome.yunqueyi.com/'  
     baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
-    webPageUrl: 'https://uat-phome.yunqueyi.com/'  
+    webPageUrl: 'https://uat-phome.yunqueyi.com/',
+    qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token",
+    qiniuFileUrl: "http://localhost:10201/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
+    qiniuImgUrl: "https://test1-file.yunqueyi.com"
   },
   dev: {
     baseUrl: 'https://dev-sc.yunqueyi.com/',
     apiUrl: 'https://dev-api.yunqueyi.com/',
-    webPageUrl: 'https://dev-phome.yunqueyi.com/'  
+    webPageUrl: 'https://dev-phome.yunqueyi.com/',
+    qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token",
+    qiniuFileUrl: "http://localhost:10201/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
+    qiniuImgUrl: "https://test1-file.yunqueyi.com"
   },
   test: {
     baseUrl: 'https://test1-sc.yunqueyi.com/',
     apiUrl: 'https://test1-api.yunqueyi.com/',
-    webPageUrl: 'https://test1-phome.yunqueyi.com/'  
+    webPageUrl: 'https://test1-phome.yunqueyi.com/',
+    qiniuUrl: "https://test1-sc.yunqueyi.com/contents/admin/qiniu/token",
+    qiniuFileUrl: "https://test1-sc.yunqueyi.com/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
+    qiniuImgUrl: "https://test1-file.yunqueyi.com"
   },
   uat: {
     baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
-    webPageUrl: 'https://uat-phome.yunqueyi.com/'  
+    webPageUrl: 'https://uat-phome.yunqueyi.com/',
+    qiniuUrl: "https://uat-sc.yunqueyi.com/contents/admin/qiniu/token",
+    qiniuFileUrl: "https://uat-sc.yunqueyi.com/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://videos.yunqueyi.com",  // 视频
+    qiniuImgUrl: "https://file.yunqueyi.com"
   },
   pro: {  
     baseUrl: 'https://sc.yunqueyi.com/',
     apiUrl: 'https://api.yunqueyi.com/',
-    webPageUrl: 'https://phome.yunqueyi.com/'
+    webPageUrl: 'https://phome.yunqueyi.com/',
+    qiniuUrl: "https://sc.yunqueyi.com/contents/admin/qiniu/token",
+    qiniuFileUrl: "https://sc.yunqueyi.com/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://videos.yunqueyi.com",
+    qiniuImgUrl: "https://file.yunqueyi.com"
   }
 }

src/utils/fetchQiniu.js

+//api路径
+import {isNotEmptyUtils} from "./utils";
+
+export default async(url = '', data = {}, type = 'POST', method = 'fetch',server='CONTENT') => {
+	type = type.toUpperCase();
+
+	// url = (server==='WECHAT'?wechatUrl:baseUrl) + url;
+    if (url.match("^http") == null){
+        url = localStorage.getItem("Url") + url;
+    }
+
+	console.log("完整url:",url)
+    if (type == 'GET' && data) {
+		let dataStr = ''; //数据拼接字符串
+		Object.keys(data).forEach(key => {
+			dataStr += key + '=' + data[key] + '&';
+		})
+
+		if (dataStr !== '') {
+			dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
+			url = url + '?' + dataStr;
+            // url = encodeURI(url + '?' + dataStr, true);
+		}
+	}
+
+	if (window.fetch && method == 'fetch') {
+        let requestConfig = {
+            credentials: 'include',
+            method: type,
+            // mode: "cors",
+            headers: {
+                // 'Access-Control-Allow-Origin': '*',
+                'Accept': '*',
+                'Content-Type': 'application/json',
+                'sysCode':'2'
+                // 'token': localStorage.getItem('token') || null, //固定传header：
+                // 'system_code': 'todo'   //固定传header：系统编号
+            },
+        }
+
+        if (type == 'POST' || type === 'PUT' || type === 'PATCH' || type === 'DELETE' && data) {
+            Object.defineProperty(requestConfig, 'body', {
+                value: JSON.stringify(data)
+            })
+        }
+		try {
+			const response = await fetch(url, requestConfig);
+			const responseJson = await response.json();
+
+			return responseJson
+		} catch (error) {
+			throw new Error(error)
+		}
+	} else {
+		return new Promise((resolve, reject) => {
+			let requestObj;
+			if (window.XMLHttpRequest) {
+				requestObj = new XMLHttpRequest();
+			} else {
+				requestObj = new ActiveXObject;
+			}
+
+			let sendData = '';
+			if (type == 'POST' || type == 'DELETE' || type == 'PUT') {
+				sendData = JSON.stringify(data);
+			}
+
+			requestObj.open(type, url, true);
+			requestObj.setRequestHeader("Content-Type", "application/json");
+			requestObj.send(sendData);
+
+			requestObj.onreadystatechange = () => {
+				if (requestObj.readyState == 4) {
+					if (requestObj.status == 200) {
+						let obj = requestObj.response
+						if (typeof obj !== 'object' && isNotEmptyUtils(obj)) {
+							obj = JSON.parse(obj);
+						}
+						resolve(obj)
+					} else {
+						reject(requestObj)
+					}
+				}
+			}
+		})
+	}
+}

src/utils/index.js

@@ -126,6 +126,22 @@ export function getWebPageUrl(url) {
   return getConfigByEnvType('webPageUrl') + url
 }
 
+// 获取七牛token
+export function getQiniuToken() {
+  return getConfigByEnvType('qiniuUrl')
+}
+export function getQiniuToken1() {
+  return getConfigByEnvType('qiniuFileUrl')
+}
+
+// 七牛上传视频和图片
+export function uploadVideo() {
+  return getConfigByEnvType('qiniuResourceUrl')
+}
+export function uploadImg() {
+  return getConfigByEnvType('qiniuImgUrl')
+}
+
 // 根据不同环境，生成URL
 function getConfigByEnvType(urlType) {
   return envConfig[process.env.BUILD_ENV][urlType]

src/views/education/item-component.vue

 <template>
-    <div class="create-component">
+    <div class="create-component-wrap">
         <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
         <div class="step-content">
             <el-steps :active="stepNum" simple>
@@ -31,6 +31,11 @@
                         :before-upload="beforeAvatarUpload">
                         <img v-if="componentList.imageUrl" :src="componentList.imageUrl" class="bg-img">
                         <img v-if="!componentList.imageUrl" class="bg-img" src="../../assets/image/small.png">
+                        <div class="limit-text">
+                            <p>尺寸大小：750*420</p>
+                            <p>限制大小：2.0 Mb</p>
+                            <p>支持.jpg,.png格式</p>
+                        </div>
                     </el-upload>
                 </el-form-item>
                 <el-row>
@@ -227,6 +232,7 @@
 </template>
 <script>
 import BreadCrumb from '../../components/breadcrumb.vue'
+import { doUpload, getFilePath } from "../../utils/qiniuUtil"
 let vm = null
 export default {
     components: {
@@ -352,8 +358,11 @@ export default {
             vm.stepNum = 2
         },
         // 上传组件图片
-        beforeAvatarUpload() {
-
+        beforeAvatarUpload(file) {
+            doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
+                vm.componentList.imageUrl = path.fullPath
+                vm.$message.success('上传成功')
+            });
         },
         // 获取组件完成率
         handleChange(value) {
@@ -492,18 +501,35 @@ export default {
 }
 </script>
 <style lang="scss">
-.create-component {
+.create-component-wrap {
     .first-step {
         margin-top: 20px;
+        .el-form-item {
+            margin-bottom: 25px;
+        }
         .bg-img {
-            width: 80px;
-            height: 80px;
+            width: 84px;
+            height: 100px;
         }
         .word-num {
             font-size: 12px;
             color: #999;
             padding-top: 5px;
         }
+        .bg-uploader {
+            img {
+                float: left;
+            }
+            .limit-text {
+                float: left;
+                margin-left: 10px;
+                padding-top: 20px;
+                p {
+                    font-size: 12px;
+                    color: #999;
+                }
+            }
+        }
     }
     .step-content {
         overflow: hidden;