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

通过阅读官方文档发现,uni.chooseFile在app端不支持非媒体文件上传;

可以使用这个插件,验证过可以上传pdf;具体使用可以去看文档

插件地址

就是还是会出现相机,这个可能需要自己解决下

实现功能:上传只能上传一个,如果文件列表有值点击上传进行toast提示,不再出现选择文件弹框,

只获取数据,展示的文件列表使用uview的u-cell-group

javascript 复制代码
<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()
        }
      }
    }
  }
相关推荐
数字游民95271 小时前
PDF批量转Markdown工具:我用AI做了一个本地桌面版,也顺手想了想AI工具怎么落地
人工智能·ai·pdf·aigc·自媒体·数字游民9527
小米渣的逆袭2 小时前
macos上一个好用的PDF文字提取工具方案
macos·pdf
DS随心转插件3 小时前
Kimi 转 pdf 怎么压缩但清晰?AI 导出鸭一站式优化,压缩文件同时留存原版高清内容
人工智能·ai·pdf·豆包·deepseek·ai导出鸭
Sour17 小时前
【无标题】aPPT 翻译后保留版式的流程:文本框、图片、母版和动画检查
pdf·powerpoint
无心水19 小时前
27、私有化部署|PaddleOCR-Server 本地OCR服务搭建
金融·pdf·ocr·pdf解析·pdf抽取·pdf提取·ocr服务
开开心心就好1 天前
解决截图被拦截黑屏问题的免费小工具
安全·智能手机·flink·kafka·pdf·音视频·1024程序员节
软件工程小施同学1 天前
CCF A区块链论文分享-NDSS 2026(2)-CtPhishCapture:揭露针对加密货币钱包的基于凭证窃取的网络钓鱼诈骗(附pdf)
网络·pdf·区块链
2601_961845151 天前
2026法考资料pdf|电子版|资料已整理
开发语言·前端框架·pdf·c#·xhtml·csrf·view design
qq_422152571 天前
PDF 解密工具怎么选?2026 年文档密码移除方案与注意事项
java·前端·pdf
Sour1 天前
Word 文档翻译后保留格式的检查清单:标题、表格、图片、目录和批注
pdf·word·办公软件·office·文档翻译