upload

src/components/Upload/index.vue

@@ -1,86 +0,0 @@
-<template>
-	<div class="upload">
-		<div class="upload-box" @click="choiceFile" v-loading="loading">
-			<div class="upload-btn" v-if="src == ''">
-				<i class="el-icon-upload"></i>
-				<span class="upload-text">点击选择文件</span>
-				<span><small>允许上传格式:jpg/png/gif,文件大小不超过5M</small></span>
-			</div>
-			<div class="upload-show" v-else>
-				<img :src="src" alt="" />
-			</div>
-		</div>
-		<input type="file" name="file" ref="file" :multiple="multiple" @change="getFile" style="display: none" :accept="accept" />
-	</div>
-</template>
-
-<script>
-	import upload from '@/utils/oss.js'
-	export default {
-		data() {
-			return {
-				url: '',
-				src: '',
-				multiple: false,
-				loading: false,
-				accept: 'image/jpg,image/jpeg,image/png,image/gif'
-			}
-		},
-		methods: {
-			choiceFile() {
-				//this.loading = true
-				this.$refs.file.click()
-			},
-			getFile(e) {
-				//this.loading = false
-				let file = e.target.files[0]
-				this.src = URL.createObjectURL(file)
-				this.$emit('getFileInfo', file)
-			},
-			sub() {
-				upload(this.files).then((res) => {
-					console.log(res)
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.upload-box {
-		width: 360px;
-		height: 300px;
-		user-select: none;
-		-webkit-user-select: none;
-		cursor: pointer;
-		.upload-btn {
-			width: 100%;
-			height: 100%;
-			border: 1px dashed #d9d9d9;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			color: #666;
-			.upload-text {
-				display: inline-block;
-				margin: 10px 0;
-			}
-			i {
-				font-size: 50px;
-				color: #c0c4cc;
-			}
-		}
-		.upload-show {
-			width: 100%;
-			height: 100%;
-			border: 1px solid #d9d9d9;
-			padding: 10px;
-			box-sizing: border-box;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-</style>

src/components/UploadOne/index.vue

@@ -0,0 +1,146 @@
+<template>
+	<div class="upload">
+		<div class="upload-box" @click="choiceFile">
+			<div class="upload-btn" v-if="!preview">
+				<i class="el-icon-upload"></i>
+				<span class="upload-text">点击选择文件</span>
+				<span>
+					<small>允许上传格式:jpg/png/gif</small><br />
+					<small>文件大小不超过{{ size }}M</small><br />
+				</span>
+			</div>
+			<div class="upload-show" v-else>
+				<div class="progress" v-show="progressStatus">
+					<div class="mask"></div>
+					<el-progress type="circle" :percentage="$store.state.oss.progress"></el-progress>
+				</div>
+
+				<img :src="preview" alt="" />
+			</div>
+		</div>
+		<input type="file" name="file" ref="file" @change="getFile" style="display: none" :accept="accept" />
+	</div>
+</template>
+
+<script>
+	import upload from '@/utils/oss.js'
+	export default {
+		props: {
+			//限制文件大小
+			size: {
+				type: Number,
+				default: 3
+			}
+		},
+		data() {
+			return {
+				//文件对象
+				fileObj: null,
+				//预览地址
+				preview: null,
+				//文件类型
+				accept: 'image/jpg,image/jpeg,image/png,image/gif',
+				//显示进度条
+				showProgress: false
+			}
+		},
+		computed: {
+			progressStatus() {
+				if (this.showProgress && this.$store.state.oss.progress != 100) {
+					return true
+				}
+				return false
+			}
+		},
+		methods: {
+			//选择文件
+			choiceFile() {
+				this.$refs.file.click()
+			},
+			//获取文件对象
+			getFile(e) {
+				this.fileObj = e.target.files[0]
+				if (!this.fileObj) return
+				let types = this.accept.split(',')
+				let type = this.fileObj.type
+				let size = this.fileObj.size
+				if (!types.includes(type)) {
+					this.$msg({ type: 'error', message: '文件类型不符' })
+					return
+				}
+				if (size > this.size * 1024 * 1024) {
+					this.$msg({ type: 'error', message: `文件不能大于${this.size}M` })
+					return
+				}
+				this.preview = URL.createObjectURL(this.fileObj)
+			},
+			//上传图片到oss并返回图片路径
+			uploadPut() {
+				if (!this.fileObj) return
+				this.showProgress = true
+				return upload(this.fileObj).then((res) => res.url)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.upload-box {
+		width: 360px;
+		height: 300px;
+		user-select: none;
+		-webkit-user-select: none;
+		cursor: pointer;
+		.upload-btn {
+			width: 100%;
+			height: 100%;
+			border: 1px dashed #d9d9d9;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			color: #666;
+			text-align: left;
+			.upload-text {
+				display: inline-block;
+				margin: 10px 0;
+				font-weight: bolder;
+			}
+			i {
+				font-size: 50px;
+				color: #c0c4cc;
+			}
+		}
+		.upload-show {
+			width: 100%;
+			height: 100%;
+			border: 1px solid #d9d9d9;
+			padding: 10px;
+			box-sizing: border-box;
+			position: relative;
+			.progress {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				z-index: 9999;
+				.mask {
+					width: 100%;
+					height: 100%;
+					background-color: rgba($color: #ddd, $alpha: 0.8);
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			}
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
+import oss from './modules/oss'
 import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
@@ -10,14 +11,15 @@ import getters from './getters'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-  modules: {
-    app,
-    user,
-    tagsView,
-    permission,
-    settings
-  },
-  getters
+	modules: {
+		app,
+		user,
+		tagsView,
+		permission,
+		settings,
+		oss
+	},
+	getters
 })
 
 export default store

src/store/modules/oss.js

@@ -0,0 +1,40 @@
+const state = {
+	region: 'oss-cn-beijing',
+	accessKeyId: 'LTAI5tJe94eBRuNzuVFyt1C2',
+	accessKeySecret: 'YRhe8lc7vpbxX8Fi4qvosDqVERFdjJ',
+	bucket: 'yangguzhineng',
+	folder: 'test',
+	progress: 0,
+	ossBaseUrl: '',
+	stsToken: ''
+}
+const mutations = {
+	SET_REGION: (state, payload) => {
+		state.region = payload
+	},
+	SET_ACCESS_KEY_ID: (state, payload) => {
+		state.accessKeyId = payload
+	},
+	SET_ACCESS_KEY_SECRET: (state, payload) => {
+		state.accessKeySecret = payload
+	},
+	SET_BUCKET: (state, payload) => {
+		state.bucket = payload
+	},
+	SET_FOLDER: (state, payload) => {
+		state.folder = payload
+	},
+	SET_PROGRESS: (state, payload) => {
+		state.progress = payload
+	},
+	SET_OSS_BASE_URL: (state) => {
+		state.ossBaseUrl = `https://${state.bucket}.${state.region}.aliyuncs.com/`
+	}
+}
+const actions = {}
+export default {
+	namespaced: true,
+	state,
+	mutations,
+	actions
+}

src/store/modules/user.js

@@ -38,7 +38,7 @@ const user = {
 			return new Promise((resolve, reject) => {
 				login(username, password, code, uuid)
 					.then((res) => {
-						setToken(res.data.token)
+						setToken(res.token)
 						commit('SET_TOKEN', res.token)
 						resolve()
 					})

src/utils/oss.js

@@ -1,43 +1,29 @@
 import OSS from 'ali-oss'
-/**
- * 配置信息
- */
-const region = 'oss-cn-beijing'
-const accessKeyId = 'LTAI5tJe94eBRuNzuVFyt1C2'
-const accessKeySecret = 'YRhe8lc7vpbxX8Fi4qvosDqVERFdjJ'
-const bucket = 'yangguzhineng'
-const folder = 'test'
+import store from '@/store'
 import { Message } from 'element-ui'
 
 let client = new OSS({
-	region: region,
-	accessKeyId: accessKeyId,
-	accessKeySecret: accessKeySecret,
-	bucket: bucket
+	region: store.state.oss.region,
+	accessKeyId: store.state.oss.accessKeyId,
+	accessKeySecret: store.state.oss.accessKeySecret,
+	bucket: store.state.oss.bucket
 })
 
-/**
- *
- * @param {上传是设置文件key , 一般为文件名称} objectKey
- * @param {文件file} file
- */
-
 //  上传
 const CooOss = function (file) {
 	if (this instanceof CooOss) {
-		let objectKey = folder + '/' + file.lastModified + '_' + getFileNameUUID()
+		let objectKey = store.state.oss.folder + '/' + file.lastModified + '_' + getFileNameUUID()
 		return new Promise((resolve, reject) => {
 			client
 				.multipartUpload(objectKey, file, {
 					progress: function (p) {
-						//上传进度
-						console.log(p)
+						store.commit('oss/SET_PROGRESS', p * 100)
 					}
 				})
 				.then((result) => {
 					resolve({
 						code: 200,
-						url: this.getOssFileUrl(objectKey),
+						url: objectKey,
 						msg: 'ok'
 					})
 				})
@@ -85,7 +71,6 @@ CooOss.prototype.getOssFileUrl = (obecjtKey) => {
 	if (!obecjtKey) return new Error('object key 必须传')
 	return 'https://' + bucket + '.' + region + '.aliyuncs.com/' + obecjtKey
 }
-
 const getFileNameUUID = () => {
 	function rx() {
 		return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)

src/utils/request.js

@@ -97,8 +97,6 @@ instance.interceptors.response.use(
 			message = '系统接口请求超时'
 		} else if (message.includes('Request failed with status code')) {
 			message = '系统接口' + message.substr(message.length - 3) + '异常'
-		} else if (error.includes('Cancel')) {
-			message = '操作太频繁，请稍后再试'
 		} else {
 			message = '系统错误，请联系管理员'
 		}

src/views/login3.vue

@@ -1,296 +0,0 @@
-<template>
-	<div class="login">
-		<div class="header">
-			<div class="inner">
-				<div class="header-left">
-					<div class="header-left-logo">
-						<img src="~@/assets/images/login/icon.png" alt="" />
-					</div>
-					<div class="header-left-line"></div>
-					<div class="header-left-text">
-						<p style="font-size: 24px">CZO智能分析管理系统</p>
-						<p style="font-size: 12px">Enterprise management integration platform</p>
-					</div>
-				</div>
-				<div class="header-right">
-					<span>合同样本</span>
-					<span>税收政策</span>
-					<span>政府惠企政策</span>
-					<span>四险一金</span>
-				</div>
-			</div>
-		</div>
-		<div class="main">
-			<div class="inner">
-				<div class="mian-info">
-					<p>企业智能信息化 高效管理 节能降耗</p>
-					<p style="margin-top: 20px">实现 标准化、机制化、流程化、责任化、市场化、人性化</p>
-					<div class="main-info-link">
-						<a href="javascript:void(0);">产品视频</a>
-						<a href="javascript:void(0);">企业诊断</a>
-					</div>
-				</div>
-				<div class="main-login">
-					<div class="main-login-title">黑龙江省华滋佐味酿造有限公司</div>
-					<div class="main-login-form">
-						<div class="main-login-from-user">
-							<label>
-								<span>账号</span>
-								<input type="text" auto-complete="off" v-model="formData.username" />
-							</label>
-						</div>
-						<div class="main-login-from-pass">
-							<label>
-								<span>密码</span>
-								<input type="password" auto-complete="off" v-model="formData.password" />
-							</label>
-						</div>
-						<div class="main-login-from-btn">
-							<button @click="handleLogin">
-								<span v-if="!loading">立即登录</span>
-								<span v-else>登 录 中...</span>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="footer">
-			<div class="inner">
-				<a href="javascript:void(0);">代理商</a>
-				<a href="javascript:void(0);">加盟商</a>
-				<a href="javascript:void(0);">合作商</a>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				loading: false,
-				formData: {
-					username: 'admin',
-					password: '15645766666'
-				},
-				redirect: undefined
-			}
-		},
-		watch: {
-			$route: {
-				handler: function (route) {
-					this.redirect = route.query && route.query.redirect
-				},
-				immediate: true
-			}
-		},
-		methods: {
-			handleLogin() {
-				if (this.formData.username.trim() == '') {
-					this.$msg({ type: 'error', message: '账号不能为空' })
-					return
-				}
-				if (this.formData.password.trim() == '') {
-					this.$msg({ type: 'error', message: '密码不能为空' })
-					return
-				}
-				this.loading = true
-				this.$store
-					.dispatch('Login', this.formData)
-					.then(() => {
-						this.$router.push({ path: this.redirect || '/' }).catch(() => {})
-					})
-					.catch(() => {
-						this.loading = false
-					})
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.login {
-		width: 100%;
-		height: 100vh;
-		.header,
-		.footer {
-			width: 100%;
-			height: 80px;
-			background: url('~@/assets/images/login/line.jpg') 0 0 no-repeat;
-		}
-		.main {
-			width: 100%;
-			height: calc(100vh - 160px);
-			background: url('~@/assets/images/login/main.jpg') 0 0 no-repeat;
-		}
-		.inner {
-			width: 80%;
-			margin: 0 auto;
-			display: flex;
-		}
-		.header {
-			.inner {
-				height: 80px;
-				justify-content: space-between;
-				align-items: center;
-				.header-left {
-					display: flex;
-					color: #fff;
-					.header-left-logo,
-					.header-left-line,
-					.header-left-text {
-						height: 60px;
-						display: flex;
-						align-items: center;
-					}
-					.header-left-line {
-						width: 2px;
-						background: url('~@/assets/images/login/1.png') 0 0 no-repeat;
-						margin: 0 5px;
-					}
-					.header-left-text {
-						height: 50px;
-						align-items: flex-start;
-						flex-direction: column;
-						justify-content: space-around;
-					}
-				}
-				.header-right {
-					height: 60px;
-					display: flex;
-					align-items: flex-end;
-					span {
-						background-color: #3cc3cc;
-						display: inline-block;
-						border-radius: 5px;
-						padding: 3px 5px;
-						margin-left: 8px;
-					}
-				}
-			}
-		}
-		.footer {
-			.inner {
-				height: 80px;
-				align-items: center;
-				a {
-					display: inline-block;
-					background-color: #3cc3cc;
-					border-radius: 5px;
-					-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
-					box-shadow: inset 0 0 11px 3px #4fcaca;
-					width: 175px;
-					height: 50px;
-					border: 1px solid #000;
-					font-size: 18px;
-					margin-right: 8px;
-					color: #fff;
-					text-align: center;
-					line-height: 50px;
-				}
-			}
-		}
-		.main {
-			.inner {
-				height: 100%;
-				align-items: center;
-				justify-content: space-between;
-				.mian-info {
-					p {
-						color: #fff;
-						font-size: 28px;
-						font-weight: bolder;
-					}
-					.main-info-link {
-						margin-top: 100px;
-						a {
-							display: inline-block;
-							width: 175px;
-							height: 50px;
-							color: #fff;
-							border-radius: 5px;
-							text-align: center;
-							line-height: 50px;
-							font-size: 18px;
-							border: 1px solid #000;
-							&:first-child {
-								background: rgba(7, 34, 83, 0.89);
-								-webkit-box-shadow: 0 0 11px 3px rgba(8, 49, 157, 0.8) inset;
-								box-shadow: inset 0 0 11px 3px rgba(8, 49, 157, 0.8);
-							}
-							&:last-child {
-								background: rgba(51, 204, 204, 0.7);
-								-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
-								box-shadow: inset 0 0 11px 3px #4fcaca;
-								margin-left: 8px;
-							}
-						}
-					}
-				}
-				.main-login {
-					width: 300px;
-					.main-login-title {
-						width: 100%;
-						height: 45px;
-						line-height: 45px;
-						font-size: 18px;
-						background: #07276a;
-						border-radius: 5px 5px 0 0;
-						color: #fff;
-						text-align: center;
-					}
-					.main-login-form {
-						width: 100%;
-						background: #a4a4af;
-						border-radius: 0 0 5px 5px;
-						padding: 40px 30px;
-						box-sizing: border-box;
-						.main-login-from-user,
-						.main-login-from-pass {
-							width: 240px;
-							border: 1px solid #000;
-							height: 30px;
-							border-radius: 5px;
-							margin-bottom: 20px;
-							overflow: hidden;
-							label {
-								display: flex;
-								span {
-									display: inline-block;
-									width: 70px;
-									height: 30px;
-									background-color: #a6a6a6;
-									text-align: center;
-									line-height: 30px;
-								}
-								input {
-									display: block;
-									width: 170px;
-									height: 30px;
-									padding: 0;
-									margin: 0;
-									border: none;
-									background-color: #fff;
-									outline: none;
-									line-height: 30px;
-									padding-left: 5px;
-								}
-							}
-						}
-						.main-login-from-btn {
-							button {
-								width: 100%;
-								color: #fff;
-								background-color: #07276a;
-								height: 35px;
-								border-radius: 5px;
-								outline: none;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-</style>

vue.config.js

@@ -21,7 +21,7 @@ module.exports = {
 		open: true,
 		proxy: {
 			[process.env.VUE_APP_BASE_API]: {
-				target: `http://182.92.174.150:9800`,
+				target: `http://192.168.0.104:8080`,
 				changeOrigin: true,
 				pathRewrite: {
 					['^' + process.env.VUE_APP_BASE_API]: ''