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

uni-app之app上传pdf类型文件

通过阅读官方文档发现,uni.chooseFile在app端不支持非媒体文件上传;
可以使用这个插件,验证过可以上传pdf;具体使用可以去看文档
在这里插入图片描述
插件地址
就是还是会出现相机,这个可能需要自己解决下
实现功能:上传只能上传一个,如果文件列表有值点击上传进行toast提示,不再出现选择文件弹框,
只获取数据,展示的文件列表使用uview的u-cell-group

<template><view class="day-que-page"><view class="feed-content"><u--form ref="uForm" :labelWidth="70"><u-form-item label="附件上传" prop="fileName" required><lsj-upload ref="lsjUpload" childId="dayUpload" :option="option" :formats="formats" :debug="debug"@uploadEnd="onuploadEnd" @progress="onprogre" @change="change" :multiple="false" :accept="accept"><u-button type="primary" @click="hanldUpload" size="mini"style="width: 180rpx;height: 30px;margin-top: 10rpx;">选择文件</u-button></lsj-upload></u-form-item></u--form><view class="" style="padding:24rpx"><u-cell-group><u-cell v-for="(item, index) in imageValue" :key="index" v-if="imageValue.length" :title="item.name"><u-icon slot="right-icon" size="12" name="close" @click="hanldDelete(item)"></u-icon></u-cell></u-cell-group></view></view><u-toast ref="uToast"></u-toast><view class="feed-bottom"><u-button text="完成" type="primary" @click="toTemplatePage" :loading="btnLoading"></u-button></view></view>
</template>``````javascriptimport {confrimFeedBack} from "../../utils/meetingDetail"export default {data() {return {fileList: [],dateId: "",imageValue: [],//文件存放列表option: {url: this.$store.state.baseUrl + "/api/psm/file/upload/file",//服务器地址name: 'file',header: {'Authorization': `Bearer ${uni.getStorageSync('token')}`}},accept: "application/pdf",formats: "pdf",debug: true,files: new Map(),btnLoading:false}},methods: {async toTemplatePage() {if (!this.imageValue.length) {this.showToastDesc("请进行附件上传");return;}let pages = getCurrentPages();let curPage = pages[pages.length - 1]; //当前页const prePage = pages[pages.length - 2]; //上一页prePage.$vm.getDayQueData(this.imageValue)uni.navigateBack({delta: 1})},hanldUpload() {if (this.imageValue.length) {this.showToastDesc("只能上传一个文件");return;}},//单个删除上传文件hanldDelete(itemFile) {this.imageValue.map((item, index) => {if (item.path === itemFile.path) {this.imageValue.splice(index, 1)}});},showToastDesc(text) {this.$refs.uToast.show({message: text,type: 'error',})},//完成上传onuploadEnd(item) {console.log(`${item.name}已上传结束,上传状态=${item.type}`);if (item['responseText']) {console.log('演示服务器返回的字符串JSON转Object对象');const responseText = JSON.parse(item.responseText);console.log(responseText, "上传成功的数据");if (responseText.code === 200) {this.imageValue.push({name: item.name,url: responseText.data});this.btnLoading=false;} else {this.showToastDesc(responseText.msg || "上传失败,请重试")}};},onprogre(item) {// 更新当前状态变化的文件this.files.set(item.name, item);console.log('打印对象', JSON.stringify(this.files.get(item.name)));},change(files) {const fileData = JSON.stringify([...files.values()]);if (fileData?.length) {const url = JSON.parse(fileData)[0].path;const name = JSON.parse(fileData)[0].name;console.log(url, name, "获取文件url");//触发上传this.$refs['lsjUpload'].upload();this.btnLoading=true;}// this.files = files;},},onLoad(props) {if (props.dayData && props.dayData !== 'null') {const dealData = JSON.parse(decodeURIComponent(props.dayData));// console.log(dealData)this.imageValue = [{...dealData}];}//当文件列表本来就有值的时候,点击上传弹出提示,不再弹出选择文件弹框//为什么使用setTimeout,option会触发show,导致设置的hide不生效const timeout = setTimeout(() => {if (this.imageValue.length) {this.$refs['lsjUpload'].hide();}if (timeout) {clearTimeout(timeout)}}, 600);},//监听文件列表的值,hide时候会触发hanldUploadwatch: {imageValue(val) {if (this.imageValue.length) {this.$refs['lsjUpload'].hide();}else{this.$refs['lsjUpload'].show()}}}}
http://www.lryc.cn/news/118280.html

相关文章:

  • bash: sudo: command not found的解决方法 | 安装sudo
  • 电脑合上盖子无线网络不会断开
  • 【从零开始学习JAVA | 第四十篇】了解线程池
  • axios如何取消请求,其原理是什么?
  • 消息中间件 Asio (C++)
  • 3.4 网络安全管理设备
  • 前端高级面试题-JS
  • AcWing 1564:哈希 ← 只具有正增量的二次探测法
  • 什么是媒体代发布?媒体代发布注意事项
  • docker版jxTMS使用指南:使用jxTMS采集数据之二
  • 系列六、Springboot操作RocketMQ
  • 【jupyter异常错误】Kernel started:No module named ipykernel_launcher
  • 使用langchain与你自己的数据对话(五):聊天机器人
  • 爬虫与搜索引擎优化:通过Python爬虫提升网站搜索排名
  • 2024软考系统架构设计师论文写作要点
  • 【Maven】依赖范围、依赖传递、依赖排除、依赖原则、依赖继承
  • 数组slice、splice字符串substr、split
  • 程序漏洞:安全威胁的隐患
  • 0基础学C#笔记09:希尔排序法
  • DOCKER的容器
  • 跳跃游戏——力扣55
  • 将本地项目上传至gitee的详细步骤
  • iOS开发-导航栏UINavigationBar隐藏底部线及透明度
  • 题目:2520.统计能整除数字的位数
  • matplotlib 笔记 注释annotate
  • Windows 无法安装到这个硬盘。选中的磁盘具有MBR分区。在EFI系统上,Windows只能安装到GPT磁盘
  • 学C的第三十三天【C语言文件操作】
  • 线性表的基本操作及在顺序存储及链式存储的实现
  • 合宙Air724UG LuatOS-Air script lib API--nvm
  • springboot单元测试的详细介绍