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>```

```javascript
  import {
    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时候会触发hanldUpload
    watch: {
      imageValue(val) {
        if (this.imageValue.length) {
          this.$refs['lsjUpload'].hide();
        }else{
          this.$refs['lsjUpload'].show()
        }
      }
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/75538.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis——Redis.conf详解+Redis持久化(RDB和AOF)+Redis订阅发布

配置文件 redis启动时通过配置文件启动 原生配置文件全文在网上随便搜索一下就能找到了。 单位 配置文件 unit单位 对大小写不敏感 包含 类比import&#xff0c;将其他的配置文件引入 网络 bind 127.0.0.1 // 绑定ip protected-mode yes //是否受保护 po…

【调整奇数偶数顺序】

调整奇数偶数顺序 1.题目 输入一个整数数组&#xff0c;实现一个函数&#xff0c; 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分&#xff0c; 所有偶数位于数组的后半部分。 2.题目分析 这道题首先用到的方法是冒泡排序的思想&#xff0c;首先通过冒泡排序…

Prometheus的搭建与使用

一、安装Prometheus 官网下载地址&#xff1a;Download | Prometheus 解压&#xff1a;tar -zxvf prometheus-2.19.2.linux-amd64.tar.gz重命名&#xff1a; mv prometheus-2.19.2.linux-amd64 /home/prometheus进入对应目录&#xff1a; cd /home/prometheus查看配置文件&am…

微服务与Nacos概述-5

引入OpenFeign 添加依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency><groupId>com.alibaba.cloud</groupId>…

【Windows 常用工具系列 8 -- 修改鼠标光标(指针)大小和颜色的快速方法方法】

文章目录 修改方法 上篇文章&#xff1a;Windows 常用工具系列 7 – 禁用win10自带的微软输入法 修改方法 Win键 i 快捷键进入设置页面&#xff0c;然后输入光标... 就会跳出修改鼠标大小与光标颜色的选项。 Win键是在计算机键盘左下角Ctrl和Alt键之间的按键 根据自己的需求…

浏览器 - 事件循环机制详解

目录 1&#xff0c;浏览器进程模型进程线程浏览器的进程和线程1&#xff0c;浏览器进程2&#xff0c;网络进程3&#xff0c;渲染进程 2&#xff0c;渲染主线程事件循环异步同步 JS 为什么会阻塞渲染任务优先级 3&#xff0c;常见面试题1&#xff0c;如何理解 js 的异步2&#x…

210、仿真-基于51单片机灭火小车超声波避障温度烟雾控制报警Proteus仿真设计(程序+Proteus仿真+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&a…

java面试题(16):Mysql一致性视图是啥时候建立的

1 演示错误案例 先给大家来一个错误演示。 我们打开两个会话窗口&#xff0c;默认情况下隔离级别是可重复读&#xff0c;我们来看下&#xff1a; 首先在 A 会话中查看当前 user 表&#xff0c;查看完成后开启事务&#xff1a; 可以看到id3的数据sex是男。 接下来在 B 会话中…

全面梳理Python下的NLP 库

一、说明 Python 对自然语言处理库有丰富的支持。从文本处理、标记化文本并确定其引理开始&#xff0c;到句法分析、解析文本并分配句法角色&#xff0c;再到语义处理&#xff0c;例如识别命名实体、情感分析和文档分类&#xff0c;一切都由至少一个库提供。那么&#xff0c;你…

LeetCode ACM模式——二叉树篇(二)

刷题顺序及思路来源于代码随想录&#xff0c;网站地址&#xff1a;https://programmercarl.com 二叉树的定义及创建见&#xff1a; LeetCode ACM模式——二叉树篇&#xff08;一&#xff09;_要向着光的博客-CSDN博客 目录 102. 二叉树的层序遍历 利用队列 利用递归 10…

R语言生存分析(机器学习)(1)——GBM(梯度提升机)

GBM是一种集成学习算法&#xff0c;它结合了多个弱学习器&#xff08;通常是决策树&#xff09;来构建一个强大的预测模型。GBM使用“Boosting”的技术来训练弱学习器&#xff0c;这种技术是一个迭代的过程&#xff0c;每一轮都会关注之前轮次中预测效果较差的样本&#xff0c;…

opencv进阶01-直方图的应用及示例cv2.calcHist()

直方图是什么&#xff1f; 直方图是一种图形表示方法&#xff0c;用于显示数据中各个数值或数值范围的分布情况。它将数据划分为一系列的区间&#xff08;也称为“箱子”或“bin”&#xff09;&#xff0c;然后统计每个区间中数据出现的频次&#xff08;或频率&#xff09;。直…

Floyd(多源汇最短路)

Floyd求最短路 给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 再给定 k 个询问&#xff0c;每个询问包含两个整数 x 和 y&#xff0c;表示查询从点 x 到点 y 的最短距离&#xff0c;如果路径不存在&#xff0c;则输出 impo…

rabbitmq的持久化

目录 队列实现持久化 如何删除队列​编辑 消息实现持久化 不公平分发 如何保障当 RabbitMQ 服务停掉以后消息生产者发送过来的消息不丢失。默认情况下 RabbitMQ 退出或由于某种原因崩溃时&#xff0c;它忽视队列和消息&#xff0c;除非告知它不要这样做。确保消息不会丢失需…

桂林小程序https证书

现在很多APP都相继推出了小程序&#xff0c;比如微信小程序、百度小程序等&#xff0c;这些小程序的功能也越来越复杂&#xff0c;不可避免的和网站一样会传输数据&#xff0c;因此小程序想要上线就要保证信息传输的安全性&#xff0c;也就是说各种类型的小程序也需要部署https…

SAP MM学习笔记24-以评估收货(评价)和非评估收货(非评价)

SAP 中 有评价入库&#xff08;评估收货&#xff09;和非评价入库&#xff08;非评估收货&#xff09;两种入库方式。 一般来说在库品目会采用评价入库&#xff0c;而消费品目&#xff0c;会采用非评价入库。 其实评价入库&#xff0c;非评价入库对外都无所谓的&#xff0c;人…

计算机竞赛 python+opencv+机器学习车牌识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器学习的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&#xff0c;适…

HTTP 协议的基本格式和 fiddler 的用法

目录 一. HTTP 协议 1. HTTP协议是什么 2. HTTP协议的基本格式 HTTP请求 首行 GET和POST方法&#xff1a; 其他方法 经典面试题&#xff1a; URL Header(请求报头)部分 空行 ​HTTP响应 状态码总结: 二、Fiddler的用法 1.Fidder的安装 2.Fidder的使用 一. HTTP 协议 1. H…

日常BUG——普通页面跳转tabbar页面报错

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 微信小程序页面跳转的时候出现下面的问题&#xff1a; wx.redirectTo({url: /pages/index/i…

java 使用log4j显示到界面和文件 并格式化

1.下载log4j jar包https://dlcdn.apache.org/logging/log4j/2.20.0/apache-log4j-2.20.0-bin.zip 2. 我只要到核心包 &#xff0c;看需要 sources是源码包&#xff0c;可以看到说明。在IDEA里先加入class jar后&#xff0c;再双击这个class jar包或或右键选Navigate ,Add ,…