提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助檔案

前言

前幾天改小程式專案，增加了上傳檔案的需求，也是第一次寫這個需求，搜索了大量關于此需求的博客檔案，終于順利完成，同時還附加了預覽檔案的功能，其中有很多博客說用webview可以實作預覽檔案，這個可以用，但是我用過之后是一堆亂碼，而且官方檔案上也說webview不能直接預覽檔案,所以我這里建議的方法是直接去呼叫wx.downloadFile()和wx.openDocument()這兩個API就可以了有需要的博友，可以參考一下我的博客！

提示：以下是本篇文章正文內容，下面案例可供參考

一、選擇檔案和上傳檔案？

wx.chooseMessageFile()用來選擇檔案，下面附上其可用屬性

wx.upLoadFile()用來上傳檔案，下面附上其可用屬性

二、上傳檔案的實作代碼

代碼如下,不懂的地方可參考注釋（示例）：

 wx.chooseMessageFile({//呼叫選擇檔案介面
      count:Number(e.currentTarget.dataset.num),//檔案數量
      type: 'file',
      success (res) {
        // tempFilePath可以作為img標簽的src屬性顯示圖片
        const tempFilePaths = res.tempFiles
        console.log('選擇',res);//這里log一下res的值
        console.log(tempFilePaths);
        tempFilePaths.forEach(i=>{
          console.log(i);
          wx.uploadFile({//呼叫上傳檔案介面
          url: request.API + "/fileUpload/upload-image", //這個介面是后臺給的
          filePath: i.path,
          name:'file',
          method:"post",
          header: {//headers記住傳Authorization也就是token值，不然會回傳401未登錄
            "content-type": "multipart/form-data",
            "Authorization": wx.getStorageSync("token")
          },
          
          success (res){
            console.log(res);
            //上傳成功后的一些操作
            wx.hideLoading();
            let rs = JSON.parse(res.data);
            if (rs.code == 0) {
              var str=rs.data.path
              console.log(str);
              var newStr = str.slice(0,4)+'s'+str.slice(4) 
                // console.log(newStr);
                const k = `${e.target.dataset.type}[${
                  e.target.dataset.key
                }].filevalue`;
            for(var i=0;i<tempFilePaths.length;i++){

              files.push({name:tempFilePaths[i].name,path:newStr})
            }
              // files.push({name:tempFilePaths[0].name,path:newStr})
              that.setData({
               [k]:files,
               files:files,
              })
              console.log(that.data.three);
            } else {
              that.setData({
                // isshow: true,
                message: "上傳失敗,稍后重試"
              });
              setTimeout(() => {
                that.setData({
                  //isshow: false,
                  message: ""
                });
              }, 2500);
            }
          }
        })
        })
        
      }
    })

三、下載檔案和打開檔案

wx.downloadFile下載檔案，下面附上其可用屬性

wx.openDocument打開檔案，下面附上其可用屬性以及可打開的檔案型別

可用屬性：

可打開的檔案型別：

二、預覽檔案的實作代碼

代碼如下,不懂的地方可參考注釋（示例）：

 wx.downloadFile({
      url: e.currentTarget.dataset.path, // 要下載檔案的路徑
      success: function (res) {
        console.log(res);
        let filePath = res.tempFilePath; //微信臨時檔案路徑
        console.log(filePath);
        wx.openDocument({
          filePath: filePath, 
                showMenu: false,  //是否顯示右上角選單按鈕  默認為false
          success: function (res) {
            console.log('打開網路檔案成功')
          },
          fail: function(error){
            console.log("打開網路檔案失敗")
          }
        })
      }
    })

以上就是微信小程式中上傳檔案及預覽檔案的方法，這些在微信官方檔案中都有，只不過不太好找，下面附上官網地址，也可點擊直接跳轉：

官網地址：https://developers.weixin.qq.com/miniprogram/dev/api/

點我跳轉到選擇檔案頁面

點我跳轉到上傳檔案頁面

點我跳轉到下載檔案頁面

點我跳轉到打開檔案頁面

以上就是我分享的關于小程式上傳及預覽檔案的博客，如果對你有用的話可點擊收藏或關注，如果有大佬有更好的方法，歡迎博客下方評論區暢所欲言喲~~