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()
        }
      }
    }
  }
相关推荐
AI_AGENT_DEV_AI5 小时前
原生 APP 开发的开发优点
uni-app
JackieDYH17 小时前
uniapp-通知滚动组件+轮播图组件封装-案例
uni-app·轮播图·通知
XLYcmy20 小时前
pdf论文处理:CSV输出模式
数据库·python·pycharm·pdf·论文·csv·dify
2501_915921431 天前
appuploader-cli 命令行上传 IPA 到 App Store Connect upload CI 集成
android·ci/cd·小程序·https·uni-app·iphone·webview
结网的兔子2 天前
【前端开发】UniApp 项目地图选型与Web-APP跨端迁移方案
前端·uni-app
SamChan902 天前
用Python+Requests批量翻译PDF:从脚本到调度
后端·python·microsoft·ai·pdf·机器翻译
SamChan902 天前
PDF翻译API的JWT签名鉴权与速率限制设计:安全实战指南
网络·安全·pdf
Web打印2 天前
gridreport导出后的pdf只支持①到⑨,然而⑩之后的不支持_gwj_20260811_122323.docx
pdf
2501_916007473 天前
Bundle ID 注册与管理 App ID 创建指南 命名规则 权限开关与删除注意事项
android·ios·小程序·https·uni-app·iphone·webview
AmyLin_20013 天前
PDF 脱敏技术【1】:PDF 脱敏不是盖黑框:为什么敏感信息仍能被复制,正确的保护方式是什么?
安全·pdf·sdk·脱敏·文档安全·pdf 脱敏·智能脱敏