首先呢，小程序打開pdf等文件有下面幾種辦法：

1. 用微信自帶的wx.downloadFile() + wx.openDocument()
2. 使用web-view，uni-app中webview可以直接加載pdf文件
3. 可以使用網(wǎng)上說的pdf.js去實(shí)現(xiàn)（我沒有用到這個(gè)，就不介紹了）

網(wǎng)上查到很多資料顯示安卓是可以通過上面第一種辦法，但是ios用第一個(gè)方法打不開，網(wǎng)上、社區(qū)確實(shí)有這個(gè)說法，但是貌似bug被修復(fù)了，我經(jīng)過測試現(xiàn)在安卓和ios都可以打開。

如果大家遇到了這樣的bug，那可以安卓使用方法1，蘋果使用webview的方式打開文件

我上傳文件使用的是uni-ui的上傳組件：

這里要提一個(gè)bug就是說，這個(gè)組件設(shè)置v-model 后上傳文件后，按道理再去讀取這個(gè)v-model的值就應(yīng)該是之前上傳的文件數(shù)據(jù)，但是打印后并沒有數(shù)據(jù)，而只有在點(diǎn)擊刪除文件后，再讀取v-model才會(huì)有值，這個(gè)bug在社區(qū)很早就有人提出了，所以我采用通過監(jiān)聽select事件去手動(dòng)存儲(chǔ)文件數(shù)據(jù)，然后對應(yīng)delete事件也刪除數(shù)組中對應(yīng)的文件數(shù)據(jù)。其次因?yàn)槲翼?xiàng)目中的需求是點(diǎn)擊文件名字預(yù)覽，那么文件的展示是手寫的，組件原本的文件展示我用display：none隱藏掉了。

<view style="width: 70%;margin: 0 auto;margin-bottom: 20rpx;">
        <uni-file-picker v-model="fileList" title="最多選擇9個(gè)文件" :list-styles="styleObject" :sourceType="['album', 'camera']"
          file-mediatype="all" ref="files" :limit="11" :auto-upload="false" @select="select" @success="success"
          @fail="fail" @progress="progress" @delete="deleteFile">
          <view class="clickBtn">點(diǎn)擊選擇文件</view>
        </uni-file-picker>
      </view>
      <view style="width: 70%;margin: 0 auto;margin-bottom: 20rpx;" v-for="(item, index) in ajaxFileList" :key="index">
        <view class="flex justify-start align-center">
          <view class="fileBox" @click="Preview(item)">{{ item.name }}</view>
          <view class="delBox" @click="delFile(index)">刪除</view>
        </view>
      </view>

 // 獲取上傳狀態(tài)
    select(e) {
      console.log('選擇文件：', e)
      e.tempFiles.forEach(item => {
        this.ajaxFileList.push({//用一個(gè)變量單獨(dú)存儲(chǔ)上傳的文件數(shù)據(jù)
          name: item.cloudPath,
          extname: item.extname,
          url: item.path,
        })
      });
      console.log(this.ajaxFileList);
    },
    deleteFile(e) {
      console.log('刪除文件：', e)
      this.ajaxFileList.forEach((item, index) => {
        if (e.tempFilePath === item.path) {
          this.ajaxFileList.splice(index, 1)
        }
      })
      console.log(this.ajaxFileList);
    },
    // 上傳成功
    success(e) {
      console.log('上傳成功')
    },
    // 上傳失敗
    fail(e) {
      console.log('上傳失?。?, e)
    },
    // 獲取上傳進(jìn)度
    progress(e) {
      console.log('上傳進(jìn)度：', e)
    },
    Preview(item) {//用正則去識別不同文件類型，然后對應(yīng)不同文件類型去做不同操作
      console.log(item);
      // 定義圖片類型的正則表達(dá)式
      const imageRegex = /(\.jpg|\.jpeg|\.png)$/i;
      // 定義文檔類型的正則表達(dá)式
      const docRegex = /(\.doc|\.docx|\.pdf)$/i;
      // 定義其他文件類型的正則表達(dá)式
      const othersRegex = /(\.txt|\.csv|\.xlsx)$/i;
      // 利用正則表達(dá)式判斷文件類型
      if (imageRegex.test(item.name)) {
        console.log("圖片類型");
        this.lookImage(item.url)
      } else if (docRegex.test(item.name)) {
        console.log("文檔類型");
        this.lookFile(item.url)
      } else if (othersRegex.test(item.name)) {
        console.log("其他文件類型");
      } else {
        uni.showToast({
          title: `未知文件類型`,
          icon: 'none',
          duration: 2000
        })
      }
    },
    delFile(index) {
      console.log(index);
      this.ajaxFileList.splice(index, 1)
    },
    lookImage(url) {
      let imgArray = [];
      imgArray[0] = url
      uni.previewImage({
        current: 0,
        urls: imgArray
      })
    },
    lookFile(url) {
    
      uni.openDocument({
        filePath: url,
        success: function (res) {
          console.log("打開文檔成功");
        },
        fail: function (res) {
          console.log("uni.openDocument,fail");
          console.log(res)
        },
        complete: function (res) {
          console.log("uni.openDocument,complete");
          console.log(res)
        }
      });
    },

如果大家的文件是https或者h(yuǎn)ttp的線上資源：

uni.downloadFile({
        url: url,
        success: function (res) {
          var filePath = res.tempFilePath;
          console.log("下載文件：",res);
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log("打開文檔成功");
            },
            fail: function (res) {
            console.log("uni.openDocument,fail");
            console.log(res)
          },
          complete: function (res) {
            console.log("uni.openDocument,complete");
            console.log(res)
          }
          });
        },
        fail: function (res) {
        console.log('uni.downloadFile,fail')
        console.log(res)
      },
      complete: function (res) {
        console.log('uni.downloadFile,complete')
        console.log(res)
      }},
      );

我本次遇到的需求是單圖預(yù)覽、文件上傳時(shí)候支持預(yù)覽文件，

如果出現(xiàn)uni.openDocument安卓能打開，ios打不卡id情況那么就看下面的文章

https://blog.csdn.net/weixin_38673922/article/details/128626373

https://blog.csdn.net/liuxiaocaie/article/details/125874472文章來源地址http://www.zghlxwxcb.cn/news/detail-765849.html

到了這里，關(guān)于uniapp微信小程序 圖片&文件上傳并且支持圖片和文件預(yù)覽（pdf等文件預(yù)覽）巨細(xì)教學(xué)！的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！