113 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			113 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
| 
 | |
| <template>
 | |
| 	<view>
 | |
| 		<!-- 身份证 -->
 | |
| 		<u-upload :disabled="ifdisabled"   width="316rpx" height="192rpx" v-if="ifsfz" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
 | |
| 			:previewFullImage="true">
 | |
| 			<image v-if="bgimg" :src="bgimg" mode="widthFix" :style="{width:`${twidth}`,height:`${theight}`}"></image>
 | |
| 		</u-upload>
 | |
| 		<u-upload :disabled="ifdisabled" v-else :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
 | |
| 			:previewFullImage="true">
 | |
| 			<!-- <image v-if="bgimg" :src="bgimg" mode="widthFix" style="width: 316rpx;height: 192rpx;!important"></image> -->
 | |
| 		</u-upload>
 | |
| 	</view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| 	import {
 | |
| 		getToken
 | |
| 	} from '@/config/auth.js'
 | |
| 	import {
 | |
| 		getUploadUrl
 | |
| 	} from '@/config/balance.js'
 | |
| 	export default {
 | |
| 		name: "uploadImg",
 | |
| 		data() {
 | |
| 			return {
 | |
| 				fileList: [],
 | |
| 
 | |
| 			};
 | |
| 		},
 | |
| 		props: {
 | |
| 
 | |
| 			bgimg: {
 | |
| 				type: String,
 | |
| 				default: ""
 | |
| 			},
 | |
| 			ifsfz: {
 | |
| 				type: Boolean,
 | |
| 				default: false
 | |
| 			},
 | |
| 			ifdisabled:{
 | |
| 				type:Boolean,
 | |
| 				default:false
 | |
| 			},
 | |
| 			twidth:{
 | |
| 				type: String,
 | |
| 				default: "316rpx"
 | |
| 			},
 | |
| 			theight:{
 | |
| 				type: String,
 | |
| 				default: "192rpx"
 | |
| 			}
 | |
| 		},
 | |
| 
 | |
| 		methods: {
 | |
| 			// 删除图片
 | |
| 			deletePic(event) {
 | |
| 				this.fileList.splice(event.index, 1)
 | |
| 				this.$emit('imageUploaded', "");
 | |
| 			},
 | |
| 			// 新增图片
 | |
| 			async afterRead(event) {
 | |
| 				// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
 | |
| 				let lists = [].concat(event.file)
 | |
| 				let fileListLen = this.fileList.length
 | |
| 				lists.map((item) => {
 | |
| 					this.fileList.push({
 | |
| 						...item,
 | |
| 						status: 'uploading',
 | |
| 						message: '上传中'
 | |
| 					})
 | |
| 				})
 | |
| 				for (let i = 0; i < lists.length; i++) {
 | |
| 					const result = await this.uploadFilePromise(lists[i].url)
 | |
| 					let item = this.fileList[fileListLen]
 | |
| 					this.fileList.splice(fileListLen, 1, Object.assign(item, {
 | |
| 						status: 'success',
 | |
| 						message: '',
 | |
| 						url: result
 | |
| 					}))
 | |
| 					fileListLen++
 | |
| 				}
 | |
| 			},
 | |
| 			uploadFilePromise(tpath) {
 | |
| 				const http = uni.$u.http.config.baseURL
 | |
| 				let token = getToken();
 | |
| 				return new Promise((resolve, reject) => {
 | |
| 					let a = uni.uploadFile({
 | |
| 						url: http + '/system/upload', // 仅为示例,非真实的接口地址
 | |
| 						filePath: tpath,
 | |
| 						name: 'file',
 | |
| 						header: {
 | |
| 							Authorization: token
 | |
| 						},
 | |
| 						formData: {
 | |
| 							user: 'test'
 | |
| 						},
 | |
| 						success: (res) => {
 | |
| 							const tdata = JSON.parse(res.data);
 | |
| 							// console.log('🌈6',data.data.url)
 | |
| 							this.$emit('imageUploaded', tdata.data.url);
 | |
| 							resolve(tdata.data.url);
 | |
| 						}
 | |
| 					});
 | |
| 				})
 | |
| 			}
 | |
| 		}
 | |
| 	}
 | |
| </script>
 | |
| 
 | |
| <style>
 | |
| 
 | |
| </style> |