上传图片

common/api.js

@@ -32,8 +32,10 @@
 import login from './httpList/login.js'
 import polyvVideo from './httpList/polyvVideo.js'
 import course from './httpList/course.js'
+import oss from './httpList/oss.js'
 export default {
 	...login,
 	...polyvVideo,
-	...course
+	...course,
+	...oss
 }

common/httpList/oss.js

@@ -0,0 +1,22 @@
+import {
+	myRequest
+} from '../request.js'
+export default {
+	//回调
+	aliyuncallback(data) {
+		return myRequest({
+			url: '/aliyun/oss/callback',
+			method: 'post',
+			data: data
+		})
+	},
+	//policy获得
+	aliyunpolicy(data) {
+		return myRequest({
+			url: '/aliyun/oss/policy',
+			method: 'get',
+			data: data
+			// noToken: true
+		})
+	},
+}

pages2/wd/info.vue

@@ -1,13 +1,12 @@
 <template>
-	<view style="padding: 30rpx;" >
+	<view style="padding: 30rpx;">
 		<view style="position: relative;">
 			<view class="tip">
-				请填写真实信息，以便我们后续为您提供完善的 <br>
+				请填写真实信息，以便我们后续为您提供完善的
+				<br />
 				个人职业成长定制服务！
 			</view>
-			<view class="btn" style="position: absolute;right: 20rpx;top: 0;">
-				编辑
-			</view>
+			<view class="btn" style="position: absolute;right: 20rpx;top: 0;">编辑</view>
 		</view>
 		<view class="form">
 			<u-form :model="form" ref="uForm">
@@ -16,172 +15,242 @@
 				<u-form-item label="身份证号" :label-width="auto"><u-input v-model="form.id" /></u-form-item>
 				<u-form-item label="性别">
 					<picker @change="bindPickerChangeSex" :value="index_sex" :range="array_sex">
-					              <view class="picker">
-					                {{array_sex[index_sex]}}
-					              </view>
-					    </picker>
+						<view class="picker">{{ array_sex[index_sex] }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="邮箱" :label-width="auto"><u-input v-model="form.email" /></u-form-item>
-				<u-form-item  label="出生日期" prop="birth" :label-width="auto">
-					<picker mode="date" :value="form.date"   @change="bindDateChange">
-						<view class="picker">
-						  {{form.date}}
-						</view>
-					  </picker>
+				<u-form-item label="出生日期" prop="birth" :label-width="auto">
+					<picker mode="date" :value="form.date" @change="bindDateChange">
+						<view class="picker">{{ form.date }}</view>
+					</picker>
 				</u-form-item>
-				<u-form-item  label="身份" ></u-form-item>
-				<u-form-item label="户籍" prop="xz" >
+				<u-form-item label="身份"></u-form-item>
+				<u-form-item label="户籍" prop="xz">
 					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
-						<view class="picker"> {{form.region1[0]}} {{form.region1[1]}} {{form.region1[2]}}</view>
-					</pick-regions>		
+						<view class="picker">{{ form.region1[0] }} {{ form.region1[1] }} {{ form.region1[2] }}</view>
+					</pick-regions>
 				</u-form-item>
 				<u-form-item label="婚姻状况" :label-width="auto">
 					<picker @change="bindPickerChangeMarry" :value="index_marry" :range="array_marry">
-					              <view class="picker">
-					                {{array_marry[index_marry]}}
-					              </view>
-					    </picker>
+						<view class="picker">{{ array_marry[index_marry] }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="所在城市" prop="xz" :label-width="auto">
 					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion2">
-						<view class="picker"> {{form.region2[0]}} {{form.region2[1]}} {{form.region2[2]}}</view>
-					</pick-regions>		
+						<view class="picker">{{ form.region2[0] }} {{ form.region2[1] }} {{ form.region2[2] }}</view>
+					</pick-regions>
 				</u-form-item>
 				<u-form-item label="政治面貌" :label-width="auto">
 					<picker @change="bindPickerChangePolitic" :value="index_politic" :range="array_politic">
-					              <view class="picker">
-					                {{array_politic[index_politic]}}
-					              </view>
-					    </picker>
+						<view class="picker">{{ array_politic[index_politic] }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="一寸头像" :label-width="auto" label-position="top">
-					<u-upload :auto-upload="false" custom-btn="true" :action="action" :file-list="fileList" width="120" height ="169" size-type="['compressed']" max-count="1">
-						<template v-slot:addBtn >
+					<u-upload
+						:auto-upload="false"
+						custom-btn="true"
+						:action="action"
+						:file-list="fileList"
+						width="120"
+						height="169"
+						size-type="['compressed']"
+						max-count="1"
+						@on-list-change="changePhotoListHeader"
+					>
+						<template v-slot:addBtn>
 							<image src="/static/info_1.png" style="width: 120rpx; height: 169rpx;"></image>
 						</template>
 					</u-upload>
 				</u-form-item>
-				<u-form-item  label="身份证人像面" :label-width="auto" label-position="top">
-					<u-upload :auto-upload="false" custom-btn="true" :action="action" :file-list="fileList1" width="120" height ="82" size-type="['compressed']" max-count="1">
-						<template v-slot:addBtn >
+				<u-form-item label="身份证人像面" :label-width="auto" label-position="top">
+					<u-upload
+						:auto-upload="false"
+						custom-btn="true"
+						:action="action"
+						:file-list="fileList1"
+						width="120"
+						height="82"
+						size-type="['compressed']"
+						max-count="1"
+						@on-list-change="changePhotoListZ"
+					>
+						<template v-slot:addBtn>
 							<image src="/static/info_2.png" style="width: 120rpx; height: 82rpx;"></image>
 						</template>
 					</u-upload>
 				</u-form-item>
 				<u-form-item label="身份证国徽面" :label-width="auto" label-position="top">
-					<u-upload :auto-upload="false" custom-btn="true" :action="action" :file-list="fileList2" width="120" height ="82" size-type="['compressed']" max-count="1">
-						<template v-slot:addBtn >
+					<u-upload
+						:auto-upload="false"
+						custom-btn="true"
+						:action="action"
+						:file-list="fileList2"
+						width="120"
+						height="82"
+						size-type="['compressed']"
+						max-count="1"
+						@on-list-change="changePhotoListF"
+					>
+						<template v-slot:addBtn>
 							<image src="/static/info_3.png" style="width: 120rpx; height: 82rpx;"></image>
 						</template>
 					</u-upload>
 				</u-form-item>
 			</u-form>
 		</view>
+		<u-button type="success" @click="submitForm">提交</u-button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				action: '33',
-				fileList: [],
-				fileList1: [],
-				fileList2: [],
-				defaultRegionCode:'440112',
-				form:{
-					date:'1990-01-01',
-					region1: ['广东省', '广州市', '天河区'],
-					region2: ['广东省', '广州市', '天河区'],
-				},
-				index_sex: 0,
-				array_sex: ['男', '女'],	
-				index_marry: 0,
-				array_marry: ['未婚', '已婚'],	
-				index_politic: 0,
-				array_politic: ['群众', '团员', '党员'],	
-			}
+export default {
+	data() {
+		return {
+			action: '33',
+			fileList: [],
+			fileList1: [],
+			fileList2: [],
+			defaultRegionCode: '440112',
+			form: {
+				date: '1990-01-01',
+				region1: ['广东省', '广州市', '天河区'],
+				region2: ['广东省', '广州市', '天河区']
+			},
+			index_sex: 0,
+			array_sex: ['男', '女'],
+			index_marry: 0,
+			array_marry: ['未婚', '已婚'],
+			index_politic: 0,
+			array_politic: ['群众', '团员', '党员']
+		};
+	},
+	onLoad(option) {},
+	onShow() {},
+	methods: {
+		changePhotoListHeader(lists, name) {
+			this.fileList = lists;
+		},
+		changePhotoListZ(lists, name) {
+			this.fileList1 = lists;
 		},
-		onLoad(option) {
+		changePhotoListF(lists, name) {
+			this.fileList2 = lists;
+		},
+		async submitForm() {
 			
+			console.log(this.form)
+			const file1 = await this.uploadFile(this.fileList, 0);
+			// const file2 = await this.uploadFile(this.fileList1, 1);
+			// const file3 = await this.uploadFile(this.fileList2, 1);
 		},
-		onShow(){
+		uploadFile(options, int) {
+			var self = this;
+			return new Promise((resolve, reject) => {
+				var data = {
+					imageStatus: int
+				};
+				this.$api.aliyunpolicy(data).then(res => {
+					var ossToken = res.data.data.resultContent;
+					console.log(ossToken)
+					uni.uploadFile({
+						url: ossToken.host,
+						name: 'file',
+						filePath: options[0].file.path,
+						fileType: 'image',
+						header: {
+							AuthorizationToken: 'WX ' + this.$store.state.token
+						}, 
+						formData: {
+							key: ossToken.dir,
+							OSSAccessKeyId: ossToken.accessid,
+							policy: ossToken.policy,
+							Signature: ossToken.signature,
+							callback: ossToken.callback,
+							success_action_status: 200,
+						},
+						success: (result)=>{
+							console.log(result);
+							resolve()
+						},
+						fail: (error)=>{
+							console.log(error)
+						}
+					});
+				});
+				resolve();
+			});
 		},
-		methods: {	
-			bindPickerChangeSex(e){
-				this.index_sex= e.detail.value
-			},
-			bindPickerChangePolitic(e){
-				this.index_politic= e.detail.value
-			},
-			bindPickerChangeMarry(e){
-				this.index_marry= e.detail.value
-			},
-			handleGetRegion2(region){
-				let array = []
-			    array.push(region[0].name) 
-				array.push(region[1].name) 
-				array.push(region[2].name) 
-				this.form.region2 = array
-				
-			},
-			// 获取选择的地区
-			handleGetRegion(region){
-				let array = []
-			    array.push(region[0].name) 
-				array.push(region[1].name) 
-				array.push(region[2].name) 
-				this.form.region1 = array
-				
-			},
-			bindDateChange(e){
-				this.form.date=e.detail.value
-				var year=this.date.substr(0,4);
-				var month=this.date.substr(5,2);
-				var day=this.date.substr(8,2);
-			},
-			actionSheetCallback(index) {
-				uni.hideKeyboard();
-				this.form.sex_text = this.actionSheetList[index].text;
-			},
+		bindPickerChangeSex(e) {
+			this.index_sex = e.detail.value;
+		},
+		bindPickerChangePolitic(e) {
+			this.index_politic = e.detail.value;
 		},
-		
+		bindPickerChangeMarry(e) {
+			this.index_marry = e.detail.value;
+		},
+		handleGetRegion2(region) {
+			let array = [];
+			array.push(region[0].name);
+			array.push(region[1].name);
+			array.push(region[2].name);
+			this.form.region2 = array;
+		},
+		// 获取选择的地区
+		handleGetRegion(region) {
+			let array = [];
+			array.push(region[0].name);
+			array.push(region[1].name);
+			array.push(region[2].name);
+			this.form.region1 = array;
+		},
+		bindDateChange(e) {
+			this.form.date = e.detail.value;
+			var year = this.date.substr(0, 4);
+			var month = this.date.substr(5, 2);
+			var day = this.date.substr(8, 2);
+		},
+		actionSheetCallback(index) {
+			uni.hideKeyboard();
+			this.form.sex_text = this.actionSheetList[index].text;
+		}
 	}
+};
 </script>
 
 <style scope>
-	.picker{
-		text-align: right;
-	}
-	input{
-		text-align: right;
-	}
-	.form{
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-		margin: 20rpx 0;
-		padding: 15rpx;
-	}
-	.btn{
-		width: 96rpx;
-		height: 48rpx;
-		background: #32467B;
-		border-radius: 16rpx;
-		font-size: 24rpx;
-		color: #FFFFFF;
-		line-height: 48rpx;
-		text-align: center;
-	}
-	
+.picker {
+	text-align: right;
+}
+input {
+	text-align: right;
+}
+.form {
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+	margin: 20rpx 0;
+	padding: 15rpx;
+}
+.btn {
+	width: 96rpx;
+	height: 48rpx;
+	background: #32467b;
+	border-radius: 16rpx;
+	font-size: 24rpx;
+	color: #ffffff;
+	line-height: 48rpx;
+	text-align: center;
+}
+
 page {
-		background: #FDFDFD;
-	}
-	.tip{
-		width: 70%;
-		font-size: 20rpx;
-		font-family: PingFang SC;
-		font-weight: 400;
-		color: #32467B;
-	}
+	background: #fdfdfd;
+}
+.tip {
+	width: 70%;
+	font-size: 20rpx;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #32467b;
+}
 </style>