uniapp小程序上传pdf文件

<template>
	<view class="mainInnBox">
		<view class="formBox">
			<!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item label="故障车辆" labelWidth="80px" prop="licensePlate" borderBottom>
					<u--input
						:placeholder="vehOptions.licensePlate"
						placeholder-style="color: #333;"
						disabledColor="#ffffff"
						border="none"
						inputAlign="right"
						disabled
						readonly
					/>
				</u-form-item>
				<u-form-item label="发生时间" labelWidth="80px" prop="occurreTime" borderBottom @click="showDate = true">
					<!-- <span class="redStar">*</span> -->
					<u--input
						v-model.trim="form.occurreTime"
						placeholder="请选择发生时间"
						disabledColor="#ffffff"
						border="none"
						inputAlign="right"
						disabled
						readonly
					/>
				</u-form-item>
				<u-form-item label="事件类型" labelWidth="80px" prop="typeName" borderBottom @click="showSelect = true">
					<!-- <span class="redStar">*</span> -->
					<u-input
						v-model="form.typeName"
						placeholder="请选择事件类型"
						disabledColor="#ffffff"
						border="none"
						inputAlign="right"
						disabled
						readonly
					>
						<!-- <template v-show="form.publishCycle" slot="suffix">
							<span>天</span>
						</template> -->
					</u-input>
				</u-form-item>
				<view class="form_label">描述</view>
				<u-form-item label=" " labelWidth="0" labelPosition="top" prop="description" borderBottom>
					<u--textarea
						v-model.trim="form.description"
						border="none"
						placeholder="请输入描述..."
						placeholderStyle="#999999"
						maxlength="100"
						height="50"
						:count="false"
						borderBottom
					/>
				</u-form-item>
				<view class="form_label">附件文件</view>
				<view class="form_label_tip">文件大小不大于10M,支持PDF</view>
				
				<!-- 上传文件展示 -->
				<view class="uploadContent">
					<view class="uploadFileBox" v-if="pdfInfo.length!=0">
						<view class="uploadTexts" @click="jump(pdfInfo[0].url)">
							{{pdfInfo[0].name}}
						</view>
						<u-icon name="close" @click="deleteFile()"></u-icon>
					</view>
					<view v-else class="uploadChoose" @click="selectFile()">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
				<!-- 上传文件按钮 -->

			</u-form>
			
		</view>
		<view class="btnBox">
			<view class="btn" @click="submitFunc">提交</view>
		</view>
		
		
		<view>
			<!-- 发生时间 -->
			<u-datetime-picker :show="showDate" v-model="datetime" mode="datetime" @cancel="closeDate" @confirm="sureDate"></u-datetime-picker>
			<!-- 事件类型 -->
			<u-picker :show="showSelect" :columns="columnsSelect" keyName="label" @cancel="closeSelect" @confirm="confirmSelect"></u-picker>
			
		</view>
		
		<u-modal
			:show="successModalShow"
			confirmText="理赔记录"
			cancelText="返回首页"
			@confirm="confirmFunc"
			@cancel="cancelFunc"
			:showConfirmButton="true"
			:showCancelButton="true"
			confirmColor="#ffffff"
			cancelColor="#333"
		>
			<view class="slot-content">
				<u-icon name="checkmark-circle-fill" color="#70b603" size="28" label="上报成功" labelPos="bottom" labelSize="16px" labelColor="#333"></u-icon>
				<view style="text-align: center;padding: 30rpx 0 0; font-size: 24rpx;">出险信息已上报</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { getToken } from '@/assets/scripts/auth'
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				recordId: '', // 保险记录id
				vehOptions: {},
 
				showDate: false, // 发生时间选择
				datetime: Number(new Date()),
				showSelect: false, // 事件类型选择
				columnsSelect: [
					[{label: '出险', value: 1},{label: '维修', value: 2}, {label: '理赔', value: 3}]
				],
				form: {
					occurreTime: '',
					typeName: '',
					description: '',
				},
				rules: {
					occurreTime: [
						{ required: true, message: '请选择发生时间', trigger: ['change']},
					], 
					typeName: [
						{ required: true, message: '请选择事件类型', trigger: ['change']},
					],
					description: [
						{ required: false, message: '请输入描述', trigger: ['blur', 'change']},
						{ min: 1, max: 100, message: '长度在100个字符之间'},
					],
				},
				btnStatus: false,
				successModalShow: false,
 
				pdfInfo: []
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			// 点击理赔记录-上报--跳转过来。
			console.log(option)
			this.recordId = option.recordId
			this.vehOptions = option
		},
		onReady() {
			this.$nextTick(()=>{
				//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			})
		},
		methods: {
			 
			// 发生时间选择
			closeDate () {
				this.showDate = false
			},
			sureDate (e) {
				// console.log(e, this.value1)
				this.form.occurreTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.$refs.uForm.clearValidate('occurreTime')
				this.showDate = false
			},

			// 事件类型选择
			closeSelect() {
				this.showSelect = false
			},
			confirmSelect(e) {
				// console.log(e)
				this.form.type = e.value[0].value
				this.form.typeName = e.value[0].label
				this.$refs.uForm.clearValidate('typeName')
				this.showSelect = false
			},

			// 上传pdf
			selectFile(){
				// console.log('111', this.pdfInfo)
				if(this.pdfInfo.length != 0){ // this.pdfInfo 要求不可重复上传
					this.$toast('如果重新上传请先删除已有的附件~')
					return
				}
				let that = this
				uni.chooseMessageFile({
					count: 1, //最多可以选择的文件个数,可以 1
					type: 'file', //所选的文件的类型,具体看官方文档
					extension: ['.pdf'], //文件类型, '.docx''.doc', 
					success (res) {
						// console.log('上传', res)
						// // tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles[0].path
						let filename = res.tempFiles[0].name; //用于页面显示的名字
						
						// console.log(filename)
						// 这一步判断可以省略,如果需求没有格式要求的话
						if(filename.indexOf(".pdf")==-1){
							that.$toast('暂时仅支持pdf格式的文件')
							return
						} else if (res.tempFiles[0].size > (10 * 1024 * 1024)) { //这里限制了文件的大小和具体文件类型,如果不限制文件类型则去掉'|| filename.indexOf(".pdf") == -1'
							that.$toast('文件大小不能超过10MB')
							// wx.showToast({
							// 		title: '文件大小不能超过10MB',
							// 		icon: "none",
							// 		duration: 2000,
							// 		mask: true
							// })
             } else {
							// console.log("开始上传")
							uni.uploadFile({
								url: uni.$u.http.config.baseURL + 'file/upload', // '这里是您后台提供文件上传的API':上传的路径
								filePath: tempFilePaths, //刚刚在data保存的文件路径
								name: 'file',   //后台获取的凭据
								formData:{ //如果是需要带参数,请在formData里面添加,不需要就去掉这个就可以的
									fileGroup: 'leasContract'
								},
								header: {
									'Content-Type': 'multipart/form-data',
									'Authorization': 'Bearer ' + getToken(),
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes)
									if (uploadFileRes.errMsg === 'uploadFile:ok') {
										let result = JSON.parse(uploadFileRes.data)
										// console.log('=====', result)
										that.pdfInfo.push({name: filename, url: result.data.previewUrl})
										that.$forceUpdate() //有时候页面渲染不上,这里强制刷新
										if (result.code === 200 && result.headImg) {
											this.$toast('保存成功')
										}
									}
								}
							})
							// console.log('上传到服务器')
						}
					},
					fail: (err) => {
						console.log(err, 'err');
						that.$forceUpdate()
					}
				})
			},
			// 删除pdf
			deleteFile() {
				this.pdfInfo = []
			},
			// 预览pdf
			jump(linkUrl) {
        // console.log("发送跳转页面地址112:" + linkUrl)
				if(linkUrl){
					let linkUrlNew = encodeURIComponent(linkUrl)
					// console.log("发送跳转页面地址111:" + linkUrlNew )
					uni.navigateTo({
						url: '/subPackages/home/claim/index?url='+ linkUrlNew
					})
				}
      },
			
 
			// 提交
			submitFunc() {
				if (this.btnStatus) {
					return
				}
				let that = this


				// 限制用户多次触发
				this.btnStatus = true
				that.$refs.uForm.validate().then(res => {
					let params = {
						recordId: that.recordId,
						occurreTime: that.form.occurreTime,
						type: that.form.type,
						description: that.form.description
					}
					// 附件pdf
					if(this.pdfInfo.length>0) {
						params.attachment = this.pdfInfo[0].picUrl
						params.attachmentName = this.pdfInfo[0].name
					}
					console.log('提交的表单', params)
					uni.showLoading({
						title: '提交中'
					})
					this.$http.post('/mobile/leaseContract/insurance/claim', params).then((res) => {
						if (res.code === 200) {
							// console.log(res)
							uni.hideLoading()
							this.successModalShow = true
							setTimeout(function() {
								that.btnStatus = false
							}, 1100)
						}
					})
					.catch((error) => {
						console.log(error)
						uni.hideLoading()
						this.$toast(error.msg)
						// 填好提交,但是接口报错,这里要释放按钮限制
						that.btnStatus = false
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					// 没有填写信息,就点击了提交按钮,校验不通过,然后填好信息后,再点击提交
					that.btnStatus = false
				})
			},
			
			// 提交成功后的弹窗
			cancelFunc () {
				this.successModalShow = false
				// uni.switchTab({ url: '/pages/index' })
				uni.redirectTo({ url: '/pages/index' })
				// uni.navigateBack()
			},
			confirmFunc () {
				this.successModalShow = false
				let params = {
					from: 'addform',
					id: this.vehOptions.vehicleId,
					vin: this.vehOptions.vin,
					licensePlate: this.vehOptions.licensePlate
				}
				uni.redirectTo({ url: '/subPackages/home/record/claim'  + uni.$u.queryParams(params)})
			},
			
		}
	}
</script>

<style scoped lang="scss">
.mainInnBox {
	height: 100vh;
	padding-top: 18rpx;
	padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
	background: #FFFFFF;
	border-top: 20rpx solid #EDF1F5;
	.formBox {
		flex: 1;
		// background-color: #fff;
		padding: 0 48rpx 150rpx;
		.item {
			display: flex;
			flex-direction: row;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #EDF1F5;
			position: relative;
			
			.label {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				margin-right: 40rpx;
			}
			.inBox {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.input {
					text-align: right;
					color: #212121;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
				}
			}
			
			&.block {
				flex-direction: column;
				border: 0;
				padding: 28rpx 0 0 0;
				
				.inBox {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border-bottom: 1rpx solid #EDF1F5;
					padding: 0 0 24rpx 0;
					
					.input {
						text-align: left;
						color: #212121;
					}
				}
			}
			.dateBox {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 999;
			}
			.tip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				font-style: normal;
				margin: 16rpx 0 20rpx 0;
			}
			.update {
				width: 136rpx;
				height: 136rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				border: 2rpx dashed #126DCC;
			}
		}
	}
	
	.form_label {
		color: #303133;
		font-size: 30rpx;
		padding-top: 20rpx;
	}
	.form_label_tip {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.btnBox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		padding-top: 32rpx;
		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		
		.btn {
			width: 600rpx;
			height: 80rpx;
			background: #4095FF;
			box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(0,0,0,0.06);
			border-radius: 12rpx;
			margin: 0 auto;
			border-radius: 12rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			letter-spacing: 2px;
			text-align: center;
			font-style: normal;
		}
	}
}

.uploadContent {
	padding-top: 20rpx;
	.uploadFileBox {
		display: flex;
		justify-content: space-between;
		background: #eeeeee;
    padding: 18rpx 30rpx;
    border-radius: 4rpx;
	}
	.uploadChoose {
		width: 140rpx;
		height: 140rpx;
		background: #EDF1F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
}
</style>

pdf.vue

<template>
	<!-- <view>kkkk</view> -->
	<!-- <web-view src="https://www.baidu.com/"></web-view> -->
	<web-view :src="toUrl"></web-view>
</template>

<script>
	// import { getToken } from '@/assets/scripts/auth'
	export default {
		data() {
			return {
				toUrl: '' // http://112.17.37.24:6090/web/country_6_wechart/stealOil_heatmap.html/?token=' + getToken() + '&httpUrl=' + 
			}
		},
		onLoad (option) {
			// console.log(option)
			this.toUrl = decodeURIComponent(option.url)
		}
	}
</script>

<style>
</style>

pages.json

{
	// 如果您是通过uni_modules形式引入uView,可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index",
			"style": {
				"navigationStyle": "custom",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/login/login",
			"style": {
				"navigationStyle": "custom",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/home/index",
			"style": {
				"navigationStyle": "custom",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/vehicles/index",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
		{
			"path": "pages/warn/index",
			"style": {
				"navigationBarTitleText": "报警"
			}
		}
	],
	"subPackages": [
		{
			"root": "subPackages",
			"pages": [
				{
					"path": "home/claim/index",
					"style": {
						"navigationBarTitleText": "出险上报",
						"enablePullDownRefresh": false
					}
				},
				{
					"path": "home/claim/pdf",
					"style": {
						"navigationBarTitleText": "预览PDF",
						"enablePullDownRefresh": false
					}
				}, 
			]
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "",
		"navigationBarBackgroundColor": "#FFF",
		"backgroundColor": "#FFF",
		"enablePullDownRefresh": false,
		"onReachBottomDistance": 100
	}
}

wx.chooseMessageFile 使用小程序API,要登录小程序管理后台,设置用户隐私协议:设置--基本信息--服务内容声明。

相关推荐
join81 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1251 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
耶啵奶膘2 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡4 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼8 小时前
微信小程序-prettier 格式化
微信小程序·小程序
我开心就好o9 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index9 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
wqq_99225027710 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
穆友航16 小时前
PDF内容提取,MinerU使用
数据分析·pdf
初遇你时动了情17 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app