当前位置： 首页 > news >正文

uniapp小程序上传pdf文件

news 来源：原创 2024/9/14 12:18:24 

<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"disabledreadonly/></u-form-item><u-form-item label="发生时间" labelWidth="80px" prop="occurreTime" borderBottom @click="showDate = true"><!-- <span class="redStar">*</span> --><u--inputv-model.trim="form.occurreTime"placeholder="请选择发生时间"disabledColor="#ffffff"border="none"inputAlign="right"disabledreadonly/></u-form-item><u-form-item label="事件类型" labelWidth="80px" prop="typeName" borderBottom @click="showSelect = true"><!-- <span class="redStar">*</span> --><u-inputv-model="form.typeName"placeholder="请选择事件类型"disabledColor="#ffffff"border="none"inputAlign="right"disabledreadonly><!-- <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--textareav-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: '', // 保险记录idvehOptions: {},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.recordIdthis.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].valuethis.form.typeName = e.value[0].labelthis.$refs.uForm.clearValidate('typeName')this.showSelect = false},// 上传pdfselectFile(){// console.log('111', this.pdfInfo)if(this.pdfInfo.length != 0){ // this.pdfInfo 要求不可重复上传this.$toast('如果重新上传请先删除已有的附件～')return}let that = thisuni.chooseMessageFile({count: 1, //最多可以选择的文件个数，可以 1type: 'file', //所选的文件的类型，具体看官方文档extension: ['.pdf'], //文件类型, '.docx''.doc', success (res) {// console.log('上传', res)// // tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFiles[0].pathlet 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()}})},// 删除pdfdeleteFile() {this.pdfInfo = []},// 预览pdfjump(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 = truethat.$refs.uForm.validate().then(res => {let params = {recordId: that.recordId,occurreTime: that.form.occurreTime,type: that.form.type,description: that.form.description}// 附件pdfif(this.pdfInfo.length>0) {params.attachment = this.pdfInfo[0].picUrlparams.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 = truesetTimeout(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 = falselet 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，要登录小程序管理后台，设置用户隐私协议：设置--基本信息--服务内容声明。

相关文章：

  • 好玩的调度技术-场景编辑器
  • Linux内核编译安装 - Deepin,Debian系
  • llama-index,uncharted and llama2:7b run locally to generate Index
  • C语言从头学35——struct结构
  • Web开发：卡片翻转效果（HTML、CSS）
  • 文心一言：如何备考软考架构师
  • MySQL第一次作业
  • 数据库day2
  • 伪元素::before :: after的用法？
  • 微软GraphRAG +本地模型+Gradio 简单测试笔记
  • 【C#】Array和List
  • 深入解析公有IP与私有IP：地址分配与使用限制
  • 智慧农业新纪元：解锁新质生产力，加速产业数字化转型
  • liosam复现
  • 测试面试宝典（六）—— 请回答集成测试和系统测试的区别，以及它们的应用场景主要是什么?
  • 2017 年终总结 —— 在路上
  • 2019年如何成为全栈工程师？
  • Java应用性能调优
  • Linux快速复制或删除大量小文件
  • Lucene解析 - 基本概念
  • Spark学习笔记之相关记录
  • vue从入门到进阶：计算属性computed与侦听器watch（三）
  • Vue源码解析（二）Vue的双向绑定讲解及实现
  • Web Storage相关
  • 从地狱到天堂，Node 回调向 async/await 转变
  • 从输入URL到页面加载发生了什么
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 码农张的Bug人生 - 初来乍到
  • 驱动程序原理
  • 如何优雅的使用vue+Dcloud（Hbuild）开发混合app
  • 手写一个CommonJS打包工具（一）
  • 延迟脚本的方式
  • 云大使推广中的常见热门问题
  • 1.Ext JS 建立web开发工程
  • ionic入门之数据绑定显示-1
  • mysql面试题分组并合并列
  • 阿里云服务器如何修改远程端口？
  • ###STL(标准模板库)
  • #window11设置系统变量#
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • $.ajax()参数及用法
  • ${factoryList }后面有空格不影响
  • （02）Unity使用在线AI大模型（调用Python）
  • (办公)springboot配置aop处理请求.
  • （附源码）node.js知识分享网站 毕业设计 202038
  • （附源码）springboot 房产中介系统 毕业设计 312341
  • （附源码）ssm考试题库管理系统 毕业设计 069043
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (每日持续更新）jdk api之StringBufferInputStream基础、应用、实战
  • （七）c52学习之旅-中断
  • (新)网络工程师考点串讲与真题详解
  • （一）Linux+Windows下安装ffmpeg
  • (一）使用Mybatis实现在student数据库中插入一个学生信息
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在