A

package.json

@@ -11,7 +11,8 @@
     "axios": "^0.18.0",
     "axios": "^0.18.0",
     "core-js": "^3.8.3",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue": "^3.2.13",
-    "vue-router": "^4.1.1"
+    "vue-router": "^4.1.1",
+    "ali-oss": "^6.17.1"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/core": "^7.12.16",

src/api/Api.js

@@ -13,6 +13,8 @@ const client = axios.create(config)
 // request interceptor
 // request interceptor
 client.interceptors.request.use(
 client.interceptors.request.use(
   config => {
   config => {
+	config.headers['Authorization'] = 'Bearer ' + '296e1ba4-8dcd-4f73-9e1e-1c750b92814c'// token
+	config.headers['TENANT-ID'] = 1
     return config
     return config
   },
   },
   error => {
   error => {
@@ -50,4 +52,8 @@ export const api = {
 	getHtml(key) {
 	getHtml(key) {
 	  return apiGet('/rest/sysSet/getInnerWeb', {key: key})
 	  return apiGet('/rest/sysSet/getInnerWeb', {key: key})
 	},
 	},
+	//获得OSS配置
+	getOss() {
+		return apiGet('/admin/systemSet/getOSSAuth')
+	}
 }
 }
\ No newline at end of file

src/components/Uploader.vue

+<template>
+	
+	<uploader :max="9" />
+	
+</template>
+
+<script>
+	
+	export default {
+		components: {
+			'uploader': () => import('@/components/ZMUploader.vue')
+		}
+	}
+	
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/components/ZMUploader.vue

+<template>
+
+	<div class="uploader_container">
+
+		<div class="input_container" :style="picStyle">
+			<input class="input_el" :accept="accept" :multiple="multiple" :max="maxSelected" type="file" @change.prevent.stop="onChange" />
+			<div class="plus_loader" slot="trigger" :style="picStyle">
+			  <i class="el-icon-plus"></i>
+			</div>
+		</div>
+
+	</div>
+
+</template>
+
+<script>
+	
+	import {Uploader} from '@/utils/oss'
+	
+	export default {
+		props: {
+			max: {
+				type: Number,
+				default: 1
+			},
+			size: {
+				type: Object,
+				default: () => {
+			  return {
+						width: "120px",
+						height: "160px"
+					}
+				}
+			},
+			playSize: {
+				type: Object,
+				default: () => {
+					return {
+						width: '60px',
+						height: '60px'
+					}
+				}
+			},
+			urls: {
+				type: String,
+				default: ""
+			},
+			lazyList: {
+				type: String,
+				default: ""
+			},
+			image: {
+				type: Boolean,
+				default: true
+			},
+			video: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				fileList: []
+			}
+		},
+		computed: {
+			picStyle() {
+			  let size = this.size
+			  return {
+			    width: size.width,
+			    height: size.height,
+			    marginRight: "10px"
+			  }
+			},
+			playStyle() {
+			  let size = this.playSize
+			  return {
+			    width: size.width,
+			    height: size.height
+			  }
+			},
+			validCount() {
+				return this.fileList.length
+			},
+			//原生属性
+			multiple() {
+				return this.max > 1
+			},
+			maxSelected() {
+				return Math.min(0, this.max - this.fileList.length)
+			},
+			accept() {
+				let str = []
+				if (this.image) {
+					str.push("image/*")
+				}
+				if (this.video) {
+					str.push("video/*")
+				}
+				return str.join(',')
+			}
+		},
+		methods: {
+			fileUpload(value, file) {
+				
+			},
+			onChange(r) {
+				let files = event.target.files
+				if(files && files.length > 0) {
+					let pick = Math.min(this.maxSelected, files.length)
+					
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uploader_container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.input_container {
+		position: relative;
+	}
+	
+	.input_el:hover, .input_el:focus, .input_el:active {
+		cursor: pointer;
+	}
+
+	.input_el {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		-ms-filter: 'alpha(opacity=0)';
+	}
+	
+	.plus_loader {
+	  height: 100%;
+	  width: 100%;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  border-color: #409EFF;
+	  border: 1px dashed #d9d9d9;
+	  border-radius: 6px;
+	}
+	
+	.plus_loader:hover {
+	  border-color: #409EFF;
+	}
+	
+	.gallery {
+	  display: flex;
+	  flex-direction: row;
+	  flex-wrap: wrap;
+	}
+	
+	.dustbin {
+	  height: 32px;
+	  width: 32px;
+	  align-self: center;
+	}
+	
+	.image_holder {
+	  position: relative;
+	  border-color: #409EFF;
+	  border: 1px dashed #d9d9d9;
+	  border-radius: 6px;
+	  margin-bottom: 6px;
+	  overflow: hidden;
+	}
+	
+	.image_content {
+	   width: 100%;
+	   height: 100%;
+	}
+	
+	.video_holder {
+	  width: 100%;
+	  height: 100%;
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  background: black;
+	}
+	
+	.image_mask {
+	  width: 100%;
+	  height: 100%;
+	  position: absolute;
+	  left: 0;
+	  top: 0;
+	  background: rgba(0, 0, 0, 0.65);
+	  opacity: 0;
+	  display: flex;
+	  flex-direction: column;
+	  justify-content: center;
+	}
+	
+	.image_mask:hover {
+	  animation: fade 0.3s linear;
+	  animation-fill-mode: forwards;
+	}
+	
+	@keyframes fade {
+	  0% {
+	    opacity: 0;
+	  }
+	  50% {
+	    opacity: 0.5;
+	  }
+	  100% {
+	    opacity: 1;
+	  }
+	}
+</style>

src/components/h5.vue

 <template>
 <template>
 	<div class="content">
 	<div class="content">
 		<div v-html="html"></div>
 		<div v-html="html"></div>
+		<!-- <uploader :max="9" /> -->
 	</div>
 	</div>
 </template>
 </template>
 
 
 <script>
 <script>
 	
 	
+	import { defineAsyncComponent } from 'vue'
+	
 	import { api } from "@/api/Api.js"
 	import { api } from "@/api/Api.js"
 	
 	
 	export default {
 	export default {
 		name: 'App',
 		name: 'App',
 		components: {
 		components: {
-
+			uploader: defineAsyncComponent(() => import('./ZMUploader.vue'))
 		},
 		},
 		data() {
 		data() {
 			return {
 			return {
@@ -20,7 +23,7 @@
 		},
 		},
 		computed: {
 		computed: {
 			key() {
 			key() {
-				return this.$route.query.key || 'HTML_SYSTEM_DES'
+				return this.$route.query.key || 'HTML_VIP_CODE'
 			}
 			}
 		},
 		},
 		mounted() {
 		mounted() {
@@ -37,12 +40,19 @@
 </script>
 </script>
 
 
 <style>
 <style>
+	img {
+		max-width: 100% !important;
+	}
 	#app {
 	#app {
 		width: 100%;
 		width: 100%;
+		max-width: 100%;
 	}
 	}
 	.content {
 	.content {
+		box-sizing: border-box;
+		margin: 0;
 		display: flex;
 		display: flex;
 		overflow-y: scroll;
 		overflow-y: scroll;
+		width: 100%;
 		padding: 16px;
 		padding: 16px;
 	}
 	}
 	body, html {
 	body, html {

src/router/index.js

@@ -4,6 +4,9 @@ import {createRouter, createWebHistory} from 'vue-router'
 const routes = [{
 const routes = [{
 	path: '/',
 	path: '/',
 	component: () => import('@/components/h5.vue')
 	component: () => import('@/components/h5.vue')
+},{
+	path: '/uploader',
+	component: () => import('@/components/Uploader.vue')
 }]
 }]
 
 
 const router = createRouter({
 const router = createRouter({

src/utils/oss.js

+import {api} from '@/api/Api'
+
+const OSS = require('ali-oss')
+
+let OSSObj = {
+  client: undefined
+}
+
+const headers = {
+  "x-oss-forbid-overwrite": "false",
+};
+
+export const Uploader = {
+
+  getOSS() {
+    if (OSSObj.client == undefined) {
+      return api.getOSS().then(r => {
+        if (r.data && r.data.code == 0) {
+          return r.data.data || true
+        } else {
+          return Promise.reject("获取OSS客户端失败")
+        }
+      }).then(auth => {
+        let oss = new OSS({
+          region: auth.region,
+          accessKeyId: auth.accessKeyId,
+          accessKeySecret: auth.accessKeySecret,
+          bucket: auth.bucket,
+          refreshSTSTokenInterval: 3600,
+          stsToken: auth.securityToken,
+          refreshSTSToken: () => {
+            return request({
+              url: '/admin/systemSet/getOSSAuth',
+              method: 'get'
+            }).then(r => {
+              if (r.data && r.data.code == 0) {
+                let d = r.data.data
+                return {
+                  accessKeyId: d.accessKeyId,
+                  accessKeySecret: d.accessKeySecret,
+                  stsToken: d.securityToken
+                }
+              } else {
+                return Promise.reject("获取OSS客户端失败")
+              }
+            })
+          }
+        })
+        OSSObj.client = oss
+        return Promise.resolve(oss)
+      })
+    }
+    return Promise.resolve(OSSObj.client)
+  },
+
+  upload(dir, file) {
+    if (dir == undefined || dir == '') {
+      return Promise.reject("上传文件夹不能为空")
+    }
+    if (file == undefined) {
+      return Promise.reject("文件不能为空")
+    }
+    return this.getOSS().then(oss => {
+      let name = Math.floor(Math.random()*1000);
+      return oss.put(dir + '/' + name + file.name, file, {headers})
+    })
+  }
+
+}