devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp小程序上传pdf文件

作者：神奇cpp | 2024-07-18 09:52:14

赞

踩

uniapp小程序上传pdf文件

  1. <template>
  2. 	<view class="mainInnBox">
  3. 		<view class="formBox">
  4. 			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
  5. 			<u-form :model="form" ref="uForm" :rules="rules">
  6. 				<u-form-item label="故障车辆" labelWidth="80px" prop="licensePlate" borderBottom>
  7. 					<u--input
  8. 						:placeholder="vehOptions.licensePlate"
  9. 						placeholder-style="color: #333;"
  10. 						disabledColor="#ffffff"
  11. 						border="none"
  12. 						inputAlign="right"
  13. 						disabled
  14. 						readonly
  15. 					/>
  16. 				</u-form-item>
  17. 				<u-form-item label="发生时间" labelWidth="80px" prop="occurreTime" borderBottom @click="showDate = true">
  18. 					<!-- <span class="redStar">*</span> -->
  19. 					<u--input
  20. 						v-model.trim="form.occurreTime"
  21. 						placeholder="请选择发生时间"
  22. 						disabledColor="#ffffff"
  23. 						border="none"
  24. 						inputAlign="right"
  25. 						disabled
  26. 						readonly
  27. 					/>
  28. 				</u-form-item>
  29. 				<u-form-item label="事件类型" labelWidth="80px" prop="typeName" borderBottom @click="showSelect = true">
  30. 					<!-- <span class="redStar">*</span> -->
  31. 					<u-input
  32. 						v-model="form.typeName"
  33. 						placeholder="请选择事件类型"
  34. 						disabledColor="#ffffff"
  35. 						border="none"
  36. 						inputAlign="right"
  37. 						disabled
  38. 						readonly
  39. 					>
  40. 						<!-- <template v-show="form.publishCycle" slot="suffix">
  41. 							<span>天</span>
  42. 						</template> -->
  43. 					</u-input>
  44. 				</u-form-item>
  45. 				<view class="form_label">描述</view>
  46. 				<u-form-item label=" " labelWidth="0" labelPosition="top" prop="description" borderBottom>
  47. 					<u--textarea
  48. 						v-model.trim="form.description"
  49. 						border="none"
  50. 						placeholder="请输入描述..."
  51. 						placeholderStyle="#999999"
  52. 						maxlength="100"
  53. 						height="50"
  54. 						:count="false"
  55. 						borderBottom
  56. 					/>
  57. 				</u-form-item>
  58. 				<view class="form_label">附件文件</view>
  59. 				<view class="form_label_tip">文件大小不大于10M，支持PDF</view>
  60. 				
  61. 				<!-- 上传文件展示 -->
  62. 				<view class="uploadContent">
  63. 					<view class="uploadFileBox" v-if="pdfInfo.length!=0">
  64. 						<view class="uploadTexts" @click="jump(pdfInfo[0].url)">
  65. 							{{pdfInfo[0].name}}
  66. 						</view>
  67. 						<u-icon name="close" @click="deleteFile()"></u-icon>
  68. 					</view>
  69. 					<view v-else class="uploadChoose" @click="selectFile()">
  70. 						<u-icon name="plus"></u-icon>
  71. 					</view>
  72. 				</view>
  73. 				<!-- 上传文件按钮 -->
  74.  
  75. 			</u-form>
  76. 			
  77. 		</view>
  78. 		<view class="btnBox">
  79. 			<view class="btn" @click="submitFunc">提交</view>
  80. 		</view>
  81. 		
  82. 		
  83. 		<view>
  84. 			<!-- 发生时间 -->
  85. 			<u-datetime-picker :show="showDate" v-model="datetime" mode="datetime" @cancel="closeDate" @confirm="sureDate"></u-datetime-picker>
  86. 			<!-- 事件类型 -->
  87. 			<u-picker :show="showSelect" :columns="columnsSelect" keyName="label" @cancel="closeSelect" @confirm="confirmSelect"></u-picker>
  88. 			
  89. 		</view>
  90. 		
  91. 		<u-modal
  92. 			:show="successModalShow"
  93. 			confirmText="理赔记录"
  94. 			cancelText="返回首页"
  95. 			@confirm="confirmFunc"
  96. 			@cancel="cancelFunc"
  97. 			:showConfirmButton="true"
  98. 			:showCancelButton="true"
  99. 			confirmColor="#ffffff"
  100. 			cancelColor="#333"
  101. 		>
  102. 			<view class="slot-content">
  103. 				<u-icon name="checkmark-circle-fill" color="#70b603" size="28" label="上报成功" labelPos="bottom" labelSize="16px" labelColor="#333"></u-icon>
  104. 				<view style="text-align: center;padding: 30rpx 0 0; font-size: 24rpx;">出险信息已上报</view>
  105. 			</view>
  106. 		</u-modal>
  107. 	</view>
  108. </template>
  109.  
  110. <script>
  111. 	import { getToken } from '@/assets/scripts/auth'
  112. 	export default {
  113. 		data() {
  114. 			return {
  115. 				imgUrl: this.$imgUrl,
  116. 				recordId: '', // 保险记录id
  117. 				vehOptions: {},
  118.  
  119. 				showDate: false, // 发生时间选择
  120. 				datetime: Number(new Date()),
  121. 				showSelect: false, // 事件类型选择
  122. 				columnsSelect: [
  123. 					[{label: '出险', value: 1},{label: '维修', value: 2}, {label: '理赔', value: 3}]
  124. 				],
  125. 				form: {
  126. 					occurreTime: '',
  127. 					typeName: '',
  128. 					description: '',
  129. 				},
  130. 				rules: {
  131. 					occurreTime: [
  132. 						{ required: true, message: '请选择发生时间', trigger: ['change']},
  133. 					], 
  134. 					typeName: [
  135. 						{ required: true, message: '请选择事件类型', trigger: ['change']},
  136. 					],
  137. 					description: [
  138. 						{ required: false, message: '请输入描述', trigger: ['blur', 'change']},
  139. 						{ min: 1, max: 100, message: '长度在100个字符之间'},
  140. 					],
  141. 				},
  142. 				btnStatus: false,
  143. 				successModalShow: false,
  144.  
  145. 				pdfInfo: []
  146. 			}
  147. 		},
  148. 		onShow() {
  149. 			
  150. 		},
  151. 		onLoad(option) {
  152. 			// 点击理赔记录-上报--跳转过来。
  153. 			console.log(option)
  154. 			this.recordId = option.recordId
  155. 			this.vehOptions = option
  156. 		},
  157. 		onReady() {
  158. 			this.$nextTick(()=>{
  159. 				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
  160. 				this.$refs.uForm.setRules(this.rules)
  161. 			})
  162. 		},
  163. 		methods: {
  164. 			 
  165. 			// 发生时间选择
  166. 			closeDate () {
  167. 				this.showDate = false
  168. 			},
  169. 			sureDate (e) {
  170. 				// console.log(e, this.value1)
  171. 				this.form.occurreTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
  172. 				this.$refs.uForm.clearValidate('occurreTime')
  173. 				this.showDate = false
  174. 			},
  175.  
  176. 			// 事件类型选择
  177. 			closeSelect() {
  178. 				this.showSelect = false
  179. 			},
  180. 			confirmSelect(e) {
  181. 				// console.log(e)
  182. 				this.form.type = e.value[0].value
  183. 				this.form.typeName = e.value[0].label
  184. 				this.$refs.uForm.clearValidate('typeName')
  185. 				this.showSelect = false
  186. 			},
  187.  
  188. 			// 上传pdf
  189. 			selectFile(){
  190. 				// console.log('111', this.pdfInfo)
  191. 				if(this.pdfInfo.length != 0){ // this.pdfInfo 要求不可重复上传
  192. 					this.$toast('如果重新上传请先删除已有的附件～')
  193. 					return
  194. 				}
  195. 				let that = this
  196. 				uni.chooseMessageFile({
  197. 					count: 1, //最多可以选择的文件个数，可以 1
  198. 					type: 'file', //所选的文件的类型，具体看官方文档
  199. 					extension: ['.pdf'], //文件类型, '.docx''.doc', 
  200. 					success (res) {
  201. 						// console.log('上传', res)
  202. 						// // tempFilePath可以作为img标签的src属性显示图片
  203. 						const tempFilePaths = res.tempFiles[0].path
  204. 						let filename = res.tempFiles[0].name; //用于页面显示的名字
  205. 						
  206. 						// console.log(filename)
  207. 						// 这一步判断可以省略，如果需求没有格式要求的话
  208. 						if(filename.indexOf(".pdf")==-1){
  209. 							that.$toast('暂时仅支持pdf格式的文件')
  210. 							return
  211. 						} else if (res.tempFiles[0].size > (10 * 1024 * 1024)) { //这里限制了文件的大小和具体文件类型,如果不限制文件类型则去掉'|| filename.indexOf(".pdf") == -1'
  212. 							that.$toast('文件大小不能超过10MB')
  213. 							// wx.showToast({
  214. 							// 		title: '文件大小不能超过10MB',
  215. 							// 		icon: "none",
  216. 							// 		duration: 2000,
  217. 							// 		mask: true
  218. 							// })
  219.              } else {
  220. 							// console.log("开始上传")
  221. 							uni.uploadFile({
  222. 								url: uni.$u.http.config.baseURL + 'file/upload', // '这里是您后台提供文件上传的API':上传的路径
  223. 								filePath: tempFilePaths, //刚刚在data保存的文件路径
  224. 								name: 'file',   //后台获取的凭据
  225. 								formData:{ //如果是需要带参数，请在formData里面添加，不需要就去掉这个就可以的
  226. 									fileGroup: 'leasContract'
  227. 								},
  228. 								header: {
  229. 									'Content-Type': 'multipart/form-data',
  230. 									'Authorization': 'Bearer ' + getToken(),
  231. 								},
  232. 								success: (uploadFileRes) => {
  233. 									// console.log(uploadFileRes)
  234. 									if (uploadFileRes.errMsg === 'uploadFile:ok') {
  235. 										let result = JSON.parse(uploadFileRes.data)
  236. 										// console.log('=====', result)
  237. 										that.pdfInfo.push({name: filename, url: result.data.previewUrl})
  238. 										that.$forceUpdate() //有时候页面渲染不上，这里强制刷新
  239. 										if (result.code === 200 && result.headImg) {
  240. 											this.$toast('保存成功')
  241. 										}
  242. 									}
  243. 								}
  244. 							})
  245. 							// console.log('上传到服务器')
  246. 						}
  247. 					},
  248. 					fail: (err) => {
  249. 						console.log(err, 'err');
  250. 						that.$forceUpdate()
  251. 					}
  252. 				})
  253. 			},
  254. 			// 删除pdf
  255. 			deleteFile() {
  256. 				this.pdfInfo = []
  257. 			},
  258. 			// 预览pdf
  259. 			jump(linkUrl) {
  260.         // console.log("发送跳转页面地址112：" + linkUrl)
  261. 				if(linkUrl){
  262. 					let linkUrlNew = encodeURIComponent(linkUrl)
  263. 					// console.log("发送跳转页面地址111：" + linkUrlNew )
  264. 					uni.navigateTo({
  265. 						url: '/subPackages/home/claim/index?url='+ linkUrlNew
  266. 					})
  267. 				}
  268.       },
  269. 			
  270.  
  271. 			// 提交
  272. 			submitFunc() {
  273. 				if (this.btnStatus) {
  274. 					return
  275. 				}
  276. 				let that = this
  277.  
  278.  
  279. 				// 限制用户多次触发
  280. 				this.btnStatus = true
  281. 				that.$refs.uForm.validate().then(res => {
  282. 					let params = {
  283. 						recordId: that.recordId,
  284. 						occurreTime: that.form.occurreTime,
  285. 						type: that.form.type,
  286. 						description: that.form.description
  287. 					}
  288. 					// 附件pdf
  289. 					if(this.pdfInfo.length>0) {
  290. 						params.attachment = this.pdfInfo[0].picUrl
  291. 						params.attachmentName = this.pdfInfo[0].name
  292. 					}
  293. 					console.log('提交的表单', params)
  294. 					uni.showLoading({
  295. 						title: '提交中'
  296. 					})
  297. 					this.$http.post('/mobile/leaseContract/insurance/claim', params).then((res) => {
  298. 						if (res.code === 200) {
  299. 							// console.log(res)
  300. 							uni.hideLoading()
  301. 							this.successModalShow = true
  302. 							setTimeout(function() {
  303. 								that.btnStatus = false
  304. 							}, 1100)
  305. 						}
  306. 					})
  307. 					.catch((error) => {
  308. 						console.log(error)
  309. 						uni.hideLoading()
  310. 						this.$toast(error.msg)
  311. 						// 填好提交，但是接口报错，这里要释放按钮限制
  312. 						that.btnStatus = false
  313. 					})
  314. 				}).catch(errors => {
  315. 					// uni.$u.toast('校验失败')
  316. 					// 没有填写信息，就点击了提交按钮，校验不通过，然后填好信息后，再点击提交
  317. 					that.btnStatus = false
  318. 				})
  319. 			},
  320. 			
  321. 			// 提交成功后的弹窗
  322. 			cancelFunc () {
  323. 				this.successModalShow = false
  324. 				// uni.switchTab({ url: '/pages/index' })
  325. 				uni.redirectTo({ url: '/pages/index' })
  326. 				// uni.navigateBack()
  327. 			},
  328. 			confirmFunc () {
  329. 				this.successModalShow = false
  330. 				let params = {
  331. 					from: 'addform',
  332. 					id: this.vehOptions.vehicleId,
  333. 					vin: this.vehOptions.vin,
  334. 					licensePlate: this.vehOptions.licensePlate
  335. 				}
  336. 				uni.redirectTo({ url: '/subPackages/home/record/claim'  + uni.$u.queryParams(params)})
  337. 			},
  338. 			
  339. 		}
  340. 	}
  341. </script>
  342.  
  343. <style scoped lang="scss">
  344. .mainInnBox {
  345. 	height: 100vh;
  346. 	padding-top: 18rpx;
  347. 	padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
  348. 	padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
  349. 	background: #FFFFFF;
  350. 	border-top: 20rpx solid #EDF1F5;
  351. 	.formBox {
  352. 		flex: 1;
  353. 		// background-color: #fff;
  354. 		padding: 0 48rpx 150rpx;
  355. 		.item {
  356. 			display: flex;
  357. 			flex-direction: row;
  358. 			padding: 28rpx 0;
  359. 			border-bottom: 1rpx solid #EDF1F5;
  360. 			position: relative;
  361. 			
  362. 			.label {
  363. 				font-family: PingFangSC, PingFang SC;
  364. 				font-weight: 400;
  365. 				font-size: 28rpx;
  366. 				color: #666666;
  367. 				text-align: left;
  368. 				font-style: normal;
  369. 				margin-right: 40rpx;
  370. 			}
  371. 			.inBox {
  372. 				flex: 1;
  373. 				display: flex;
  374. 				align-items: center;
  375. 				justify-content: flex-end;
  376. 				
  377. 				.input {
  378. 					text-align: right;
  379. 					color: #212121;
  380. 					font-family: PingFangSC, PingFang SC;
  381. 					font-weight: 400;
  382. 					font-size: 28rpx;
  383. 				}
  384. 			}
  385. 			
  386. 			&.block {
  387. 				flex-direction: column;
  388. 				border: 0;
  389. 				padding: 28rpx 0 0 0;
  390. 				
  391. 				.inBox {
  392. 					flex: 1;
  393. 					display: flex;
  394. 					align-items: center;
  395. 					justify-content: flex-start;
  396. 					border-bottom: 1rpx solid #EDF1F5;
  397. 					padding: 0 0 24rpx 0;
  398. 					
  399. 					.input {
  400. 						text-align: left;
  401. 						color: #212121;
  402. 					}
  403. 				}
  404. 			}
  405. 			.dateBox {
  406. 				position: absolute;
  407. 				left: 0;
  408. 				right: 0;
  409. 				top: 0;
  410. 				bottom: 0;
  411. 				z-index: 999;
  412. 			}
  413. 			.tip {
  414. 				font-family: PingFangSC, PingFang SC;
  415. 				font-weight: 400;
  416. 				font-size: 28rpx;
  417. 				color: #999999;
  418. 				font-style: normal;
  419. 				margin: 16rpx 0 20rpx 0;
  420. 			}
  421. 			.update {
  422. 				width: 136rpx;
  423. 				height: 136rpx;
  424. 				background: #FFFFFF;
  425. 				border-radius: 12rpx;
  426. 				border: 2rpx dashed #126DCC;
  427. 			}
  428. 		}
  429. 	}
  430. 	
  431. 	.form_label {
  432. 		color: #303133;
  433. 		font-size: 30rpx;
  434. 		padding-top: 20rpx;
  435. 	}
  436. 	.form_label_tip {
  437. 		font-weight: 400;
  438. 		font-size: 28rpx;
  439. 		color: #999999;
  440. 	}
  441. 	.btnBox {
  442. 		position: fixed;
  443. 		left: 0;
  444. 		right: 0;
  445. 		bottom: 0;
  446. 		z-index: 1;
  447. 		padding-top: 32rpx;
  448. 		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
  449. 		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  450. 		
  451. 		.btn {
  452. 			width: 600rpx;
  453. 			height: 80rpx;
  454. 			background: #4095FF;
  455. 			box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(0,0,0,0.06);
  456. 			border-radius: 12rpx;
  457. 			margin: 0 auto;
  458. 			border-radius: 12rpx;
  459. 			font-family: PingFangSC, PingFang SC;
  460. 			font-weight: 500;
  461. 			font-size: 32rpx;
  462. 			color: #FFFFFF;
  463. 			line-height: 80rpx;
  464. 			letter-spacing: 2px;
  465. 			text-align: center;
  466. 			font-style: normal;
  467. 		}
  468. 	}
  469. }
  470.  
  471. .uploadContent {
  472. 	padding-top: 20rpx;
  473. 	.uploadFileBox {
  474. 		display: flex;
  475. 		justify-content: space-between;
  476. 		background: #eeeeee;
  477.     padding: 18rpx 30rpx;
  478.     border-radius: 4rpx;
  479. 	}
  480. 	.uploadChoose {
  481. 		width: 140rpx;
  482. 		height: 140rpx;
  483. 		background: #EDF1F5;
  484. 		display: flex;
  485. 		align-items: center;
  486. 		justify-content: center;
  487. 	}
  488. 	
  489. }
  490. </style>

 pdf.vue

  1. <template>
  2. 	<!-- <view>kkkk</view> -->
  3. 	<!-- <web-view src="https://www.baidu.com/"></web-view> -->
  4. 	<web-view :src="toUrl"></web-view>
  5. </template>
  6.  
  7. <script>
  8. 	// import { getToken } from '@/assets/scripts/auth'
  9. 	export default {
  10. 		data() {
  11. 			return {
  12. 				toUrl: '' // http://112.17.37.24:6090/web/country_6_wechart/stealOil_heatmap.html/?token=' + getToken() + '&httpUrl=' + 
  13. 			}
  14. 		},
  15. 		onLoad (option) {
  16. 			// console.log(option)
  17. 			this.toUrl = decodeURIComponent(option.url)
  18. 		}
  19. 	}
  20. </script>
  22. <style>
  23. </style>

 pages.json

  1. {
  2. 	// 如果您是通过uni_modules形式引入uView，可以忽略此配置
  3. 	"easycom": {
  4. 		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
  5. 	},
  6. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  7. 		{
  8. 			"path": "pages/index",
  9. 			"style": {
  10. 				"navigationStyle": "custom",
  11. 				"enablePullDownRefresh": true
  12. 			}
  13. 		},
  14. 		{
  15. 			"path": "pages/login/login",
  16. 			"style": {
  17. 				"navigationStyle": "custom",
  18. 				"enablePullDownRefresh": false
  19. 			}
  20. 		},
  21. 		{
  22. 			"path": "pages/home/index",
  23. 			"style": {
  24. 				"navigationStyle": "custom",
  25. 				"enablePullDownRefresh": true
  26. 			}
  27. 		},
  28. 		{
  29. 			"path": "pages/vehicles/index",
  30. 			"style": {
  31. 				"navigationStyle": "custom"
  32. 			}
  33. 		},
  34. 		{
  35. 			"path": "pages/user/index",
  36. 			"style": {
  37. 				"navigationBarTitleText": "我的"
  38. 			}
  39. 		},
  40. 		{
  41. 			"path": "pages/warn/index",
  42. 			"style": {
  43. 				"navigationBarTitleText": "报警"
  44. 			}
  45. 		}
  46. 	],
  47. 	"subPackages": [
  48. 		{
  49. 			"root": "subPackages",
  50. 			"pages": [
  51. 				{
  52. 					"path": "home/claim/index",
  53. 					"style": {
  54. 						"navigationBarTitleText": "出险上报",
  55. 						"enablePullDownRefresh": false
  56. 					}
  57. 				},
  58. 				{
  59. 					"path": "home/claim/pdf",
  60. 					"style": {
  61. 						"navigationBarTitleText": "预览PDF",
  62. 						"enablePullDownRefresh": false
  63. 					}
  64. 				}, 
  65. 			]
  66. 		}
  67. 	],
  68. 	"globalStyle": {
  69. 		"navigationBarTextStyle": "black",
  70. 		"navigationBarTitleText": "",
  71. 		"navigationBarBackgroundColor": "#FFF",
  72. 		"backgroundColor": "#FFF",
  73. 		"enablePullDownRefresh": false,
  74. 		"onReachBottomDistance": 100
  75. 	}
  76. }

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/844845
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号