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.mzph.cn/news/31491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

刷新缓冲区(标准IO)

标准IO是带缓冲的&#xff0c;输入和输出函数属于行缓冲&#xff0c;stdin、stdin、printf、scanf 1.换行符刷新 2.缓冲区满刷新 3.fflush函数强制刷新 4.程序正常结束

在线Word怎么转换成PDF?Word无法转换成PDF文档原因分析

不同的文件格式使用方法是不一样的&#xff0c;而且也需要使用不同的工具才可以打开编辑内容&#xff0c;针对不同的场合用户们难免会用到各种各样的文件格式&#xff0c;要想在不修改内容的前提下提高工作效率&#xff0c;那就需要用到文件格式转换&#xff0c;那么在线Word怎…

交换机的堆叠技术

目录 一、堆叠的优势 1、提高可靠性 2、简化组网 3、简化管理 4、强大的网络拓展 二、堆叠的方式 1、堆叠卡堆叠 2、业务口堆叠 3、堆叠卡和业务卡堆叠的优缺点 三、堆叠的原理 1、角色 2、单机堆叠 3、堆叠ID 4、堆叠的优先级 5、堆叠的建立过程 1&#xff09…

Windows下安装Sqoop

Windows下安装Sqoop 一、Sqoop简介二、Sqoop安装2.1、Sqoop官网下载2.2、Sqoop网盘下载2.3、Sqoop安装&#xff08;以version&#xff1a;1.4.7为例&#xff09;2.3.1、解压安装包到 D:\bigdata\sqoop\1.4.7 目录2.3.2、新增环境变量 SQOOP_HOME2.3.3、环境变量 Path 添加 %SQO…

Nginx负载均衡(重点)

正向代理 部署正向代理 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; proxy_pass http://20.0.0.60:80…

Apple AudioToolbox 之 音频编解码(AudioConverterRef)

今天记录是的是 使用 AudioToolbox 框架 使用 AudioConverterRef 工具进行本地音频文件的编码和解码。 本文打仓库代码为&#xff1a; JBLocalAudioFileConvecter 分别实现了&#xff1a; flac,mp3等其他音频编码文件 转换成 pcm文件。 &#xff08;解码&#xff09;pcm文件 …

macos搭建appium-iOS自动化测试环境

目录 准备工作 安装必需的软件 安装appium 安装XCode 下载WDA工程 配置WDA工程 搭建appiumwda自动化环境 第一步&#xff1a;启动通过xcodebuild命令启动wda服务 分享一下如何在mac电脑上搭建一个完整的appium自动化测试环境 准备工作 前期需要准备的设备和账号&…

【深度学习笔记】TensorFlow 常用函数

TensorFlow 提供了一些机器学习中常用的数学函数&#xff0c;并封装在 Module 中&#xff0c;例如 tf.nn Module 提供了神经网络常用的基本运算&#xff0c;tf.math Module 则提供了机器学习中常用的数学函数。本文主要介绍 TensorFlow 深度学习中几个常用函数的定义与用法&…

机器学习---监督学习和非监督学习

根据训练期间接受的监督数量和监督类型&#xff0c;可以将机器学习分为以下四种类型&#xff1a;监督学习、非监督学习、半监督学习和强化学习。 监督学习 在监督学习中&#xff0c;提供给算法的包含所需解决方案的训练数据&#xff0c;成为标签或标记。 简单地说&#xff0c;…

IoTDB 小白“踩坑”心得:入门安装部署篇

小伙伴介绍&#xff01; 大家好&#xff0c;我是 zai&#xff0c;一个基本功不那么扎实、没有太多经验的大学生。我刚刚加入社区&#xff0c;接触 IoTDB&#xff0c;目前仍处于学习阶段&#xff0c;所以我会跟大家分享我学习过程中踩过的一些雷&#xff0c;以及对应的解决办法&…

超低功耗在智能门锁行业的应用

1. 名词解释 在本体上以电子方式识别、处理人体生物特征信息、电子信息、网络通讯信息等并控制机械执行机构实施启闭的门锁”叫电子智能门锁。通俗地理解&#xff0c;智能门锁是电子信息技术与机械技术相结合的全新的锁具品类&#xff0c;是在传统机械锁基础上升级改进的&…

SpringBoot运行流程源码分析------阶段二(run方法核心流程)

run方法核心流程 在分析和学习整个run方法之前&#xff0c;我们可以通过以下流程图来看下SpringApplication调用的run方法处理的核心操作包含哪些。 从上面的流程图中可以看出&#xff0c;SpringApplication在run方法中重点做了以下几步操作 获取监听器和参数配置打印banner…

.NET6使用SqlSugar操作数据库

1.//首先引入SqlSugarCore包 2.//新建SqlsugarSetup类 public static class SqlsugarSetup{public static void AddSqlsugarSetup(this IServiceCollection services, IConfiguration configuration,string dbName "ConnectString"){SqlSugarScope sqlSugar new Sq…

函数的递归

1、什么是递归&#xff1f; 程序调用自身的编程技巧称为递归。 递归作为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法&#xff0c;它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解&#x…

CM11 链表分割 题解

题目描述&#xff1a; 链表分割_牛客题霸_牛客网 (nowcoder.com) 现有一链表的头指针 ListNode* pHead&#xff0c;给一定值x&#xff0c;编写一段代码将所有小于x的结点排在其余结点之前&#xff0c;且不能改变原来的数据顺序&#xff0c;返回重新排列后的链表的头指针。 题解…

工业4.0:欢迎来到智能制造

制造业正在经历一场被称为“工业4.0”的全新技术革命&#xff0c;这场革命将数字化、网络化、智能化和自动化技术融合在一起&#xff0c;旨在打造高质、高效、高产且可持续的智能工厂。工业4.0将彻底改变产品制造的方式&#xff0c;颠覆我们对制造业的传统认知。 什么是工业4.…

MRO工业品采购过程中,采购人员要注意哪些事项

MRO工业品指工厂或企业对其生产和工作设施、设备进行保养、维修&#xff0c;保证其运行所需要的非生产性物料&#xff0c;这些物料可能是用于设备保养、维修的备品备件&#xff0c;也可能是保证企业正常运行的相关设备&#xff0c;耗材等物资&#xff0c;如安全防护、传媒广电、…

(一)创建型设计模式:3、建造者模式(Builder Pattern)

目录 1、建造者模式含义 2、建造者模式的讲解 3、使用C实现建造者模式的实例 4、建造者模式的优缺点 5、建造者模式VS工厂模式 1、建造者模式含义 The intent of the Builder design pattern is to separate the construction of a complex object from its representatio…

检测ChatGPT生成内容的工具经常误报,怪不得OpenAI停用它

​近日&#xff0c;加利福尼亚大学戴维斯分校的学生被指控使用ChaGPT作弊。他的老师指控他在历史考试中使用了ChatGPT&#xff0c;这一指控得到了某生成式内容检测工具的支持。然而&#xff0c;该名学生坚决否认这一指控&#xff0c;他通过提供在线文档的编辑日志为自己洗清了嫌…

Git仓关联多个远程仓路径

前言 Git仓如果需要将代码push到多个仓&#xff0c;常用的做法是添加多个远程仓路径&#xff0c;然后分别push。这样虽然可以实现目的&#xff0c;但是需要多次执行push指令&#xff0c;很麻烦。 本文介绍关联多个远程仓路径且执行一次push指令的方法&#xff1a;git remote …