[uniapp] uniapp上传手机pdf文件

不想起名55

已于 2024-04-16 11:49:50 修改

阅读量3.3k

点赞数 9

分类专栏：小程序文章标签： uni-app pdf notepad++

于 2024-01-10 13:59:24 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75499330/article/details/135500905

版权

小程序专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用uni-file-picker组件上传文件，重点讨论了如何隐藏已上传的PDF文件，以及处理HTTP链接时如何先下载到本地再通过openDocument预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从微信小程序上传文件

上传文件

使用uni-file-picker组件上传代码

<uni-file-picker
  ref="files"
  :auto-upload="false"
  limit="9"
  file-mediatype="all"
  @select="select"
>
  <view>文件上传</view>
</uni-file-picker>

// 上传文件
select(e) {
  this.$refs.popup.close();
  let fullPath = e.tempFilePaths; //图片集合
  let uploadFiles = fullPath.map((item) => {
    return item.substring(item.lastIndexOf(".") + 1).toLowerCase(); //文件后缀小写
  });
  let typeInfo = ["pdf"];
  // 过滤出 uploadFiles 中在 typeInfo 中没有出现过的值
  const notFound = uploadFiles.filter((item) => !typeInfo.includes(item));
  if (notFound.length > 0) {
    uni.showToast({
      title: "目前仅支持pdf文件！",
      icon: "none",
      duration: 2000,
    });
    return false;
  }else{
	  //接口
	  //......
  }
}

在这里插入图片描述

但是这会出现上传的pdf回显在下面

在这里插入图片描述
不想让文件显示，直接把高度设置0

.is-text-box {
  height: 0;
}

显示文件

在这里插入图片描述
我这边是http开头的，所以需要先下载文件资源到本地才能打开

previewImage(url) {
  uni.downloadFile({
    url: url,
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
      });
    },
  });
},

最后看看成果吧

在这里插入图片描述