這次按照我的理解來做這部分的筆記

首先，復(fù)習(xí)上節(jié)課所學(xué)的內(nèi)容。就是網(wǎng)絡(luò)請(qǐng)求api的使用

?現(xiàn)在我有一個(gè)需求就是點(diǎn)擊按鈕實(shí)現(xiàn)獲取后端返回的圖片

?先打開服務(wù)器

?看一下我們要返回的圖片路徑

?書寫結(jié)構(gòu)

?看一下返回來的數(shù)據(jù)。是在data下的banners里。因此我們封裝一下

?這樣就做了一個(gè)簡單的輪播圖效果

<button type="primary" bindtap="getAdv">獲取輪播圖</button>
<swiper class="adv" indicator-dots autoplay circular>
<block wx:for="{{list}}" wx:key="index">
  <swiper-item>
    <image src="{{item.imageUrl}}" mode=""/>
  </swiper-item>
</block>
</swiper>

  data: {
    list:[]
  },
  getAdv(e){
    var page=this
    wx.request({
      url: 'http://localhost:3000/banner',
      method:"GET",
      dataType:"json",
      header:{
        'content-type':"application/json"
      },
      success(res){
        var list=res.data.banners
        page.setData({list:list})
      }
    })
  },

現(xiàn)在如果我們想要將一張網(wǎng)絡(luò)上的圖片保存到本地，那么如何使用呢？

這里我們需要用這個(gè)api

?一個(gè)簡單的頁面結(jié)構(gòu)，要實(shí)現(xiàn)倆種功能。分別是讀取網(wǎng)絡(luò)圖片到本地，和下載圖片到我們的后端服務(wù)器中

把這張網(wǎng)絡(luò)圖片下載到我們的小程序，然后轉(zhuǎn)換為本地路徑，渲染到頁面上?

?這里我們調(diào)用downloadFile，當(dāng)訪問請(qǐng)求沒有問題時(shí)，它會(huì)返回給我們一個(gè)result。而我們打印這個(gè)result中明顯的發(fā)現(xiàn).tempFilePath就是相對(duì)應(yīng)的本地圖片路徑。那么我們簡單的渲染到頁面就可以了?

downLoad(){
      wx.downloadFile({
        url: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
        success: (result) => {
          console.log('上傳成功',result);
          this.setData({
            src:result.tempFilePath
          })
        },
        fail: (res) => {
          console.log('上傳失敗');
        },
        complete: (res) => {},
      })
    },

下載功能，我們用php搭一個(gè)后端服務(wù)器。然后把資源放進(jìn)行。

這里我們采用Windows版phpstudy下載 - 小皮面板(phpstudy) (xp.cn)?phpstudy，這個(gè)免費(fèi)的工具

直接啟動(dòng)服務(wù)器就可以了

?把這個(gè)php文件放到根目錄下面

<?php
if ($_FILES["file"]["error"] > 0) {
  echo "Error: " . $_FILES["file"]["error"];
} else {
  move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);
  echo "uploads/" . $_FILES["file"]["name"];
}
?>

這部分，有點(diǎn)php基礎(chǔ)的應(yīng)該都能看懂，就不必介紹了。在這里我還需要新建一個(gè)uploads這個(gè)目錄。?

?php代碼如下：

upload(){
      wx.chooseMedia({
        count:9,
        success(res){
          console.log(res);
          var path=res.tempFiles[0].tempFilePath
          wx.uploadFile({
            filePath: path,
            name: 'file',
            url: 'http://localhost/upload.php',
            success(res){
              console.log('上傳成功'+res.data);
            },
            fail(err){
              console.log('上傳失敗',err);
            }
          })
        },
        fail(err){
          console.log('選擇失敗'+err);
        }
      })
    },

?

upload(){
      wx.chooseMedia({
        count:9,
        success(res){
          console.log(res);
          var path=res.tempFiles[0].tempFilePath
          wx.uploadFile({
            filePath: path,
            name: 'file',
            url: 'http://localhost/upload.php',
            success(res){
              console.log('上傳成功'+res.data);
            },
            fail(err){
              console.log('上傳失敗',err);
            }
          })
        },
        fail(err){
          console.log('選擇失敗'+err);
        }
      })
    },

?解析了這段代碼的實(shí)現(xiàn)方式：?

1. wx.chooseMedia()?方法用于選擇媒體文件，包括圖片、音頻和視頻等類型。該方法接受兩個(gè)參數(shù)：count?表示最多可選擇的文件數(shù)量，默認(rèn)為 9;success?是一個(gè)回調(diào)函數(shù)，當(dāng)用戶選擇完媒體文件后會(huì)觸發(fā)該回調(diào)函數(shù)。在該函數(shù)內(nèi)部，通過?res.tempFiles[0].tempFilePath?獲取用戶選中的文件路徑。
2. wx.uploadFile()?方法用于上傳文件，包括圖片、音頻和視頻等類型。該方法接受五個(gè)參數(shù)：filePath?表示要上傳的文件路徑；name?表示上傳到服務(wù)器上的文件名；url?表示上傳到服務(wù)器的 URL 地址；success?是一個(gè)回調(diào)函數(shù)，當(dāng)文件上傳成功后會(huì)觸發(fā)該回調(diào)函數(shù)；fail?是一個(gè)回調(diào)函數(shù)，當(dāng)文件上傳失敗時(shí)會(huì)觸發(fā)該回調(diào)函數(shù)。在該函數(shù)內(nèi)部，通過?res.data?獲取服務(wù)器返回的數(shù)據(jù)。
3. 在?fail(err)?回調(diào)函數(shù)中，會(huì)輸出上傳失敗的信息。
4. 整個(gè)?upload()?方法的作用是先調(diào)用?wx.chooseMedia()?方法選擇媒體文件，然后調(diào)用?wx.uploadFile()?方法上傳文件。

?這里要注意的一點(diǎn)就這個(gè)php的name必須要跟我們成功回調(diào)里面name是相同的。用人話來說就是先調(diào)用chooseMedia這個(gè)api打開文件，因?yàn)槲覀冞@里設(shè)置了count:9因此一次最多能選擇9個(gè)文件。選擇成功執(zhí)行成功回調(diào)，這里在調(diào)用uploadFile這個(gè)api，我先拿到本地圖片路徑，然后保存到url（服務(wù)器）的路徑下面就可以了

說一下最后一部分文件的操作

SavedFileList(){
    wx.downloadFile({
      url: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
      success: (result) => {
        var path=result.tempFilePath
        wx.saveFile({
          tempFilePath: path,
          success(res){
            var saveFilePath=res.savedFilePath
            console.log('本地文件路徑'+saveFilePath);
          }
        })
      },
      fail: (res) => {
        console.log('上傳失敗');
      },
      complete: (res) => {},
    })
  },

SavedFileList這個(gè)函數(shù)實(shí)現(xiàn)的是，先讀取網(wǎng)絡(luò)圖片到本地，然后通過saveFile這個(gè)api保存到本地

我們這里的http路徑指的是小程序內(nèi)部的路徑

getSavedFileList(){
    wx.getSavedFileList({
      success(res){
        var fileList=res.fileList;
        console.log(fileList);
        for (var i=0;i<fileList.length;i++){
          var file=fileList[i];
          console.log("第"+(i+1)+"個(gè)文件");
          console.log("文件創(chuàng)建時(shí)間:"+file.createTime);
          console.log("文件大小:"+file.size);
          console.log("文件本地路徑:"+file.filePath);

        }
      }
    })
  },

第二個(gè)功能是獲取本地文件列表，通過getSavedFileList這個(gè)api實(shí)現(xiàn)。因?yàn)槌晒卣{(diào)返回的是一個(gè)數(shù)組，所有我們可以通過遍歷數(shù)組的方式來，遍歷數(shù)組中的每一個(gè)元素

?通過我們可以調(diào)用相對(duì)應(yīng)的屬性，例如res.size就是文件的大小

第三個(gè)功能是獲取本地文件信息，也就是調(diào)用?getSavedFileInfo這個(gè)api。其實(shí)上一個(gè)獲取列表的方式能獲得單一的文件，這個(gè)getSavedFileInfo就是基于getSavedFileList的進(jìn)一步的封裝

getSavedFileInfo(){
    wx.getSavedFileList({
      success(res){
        var fileList=res.fileList;
        console.log(fileList);
        wx.getSavedFileInfo({
          filePath: fileList[0].filePath,
          success(res){
            console.log("文件大小"+res.size+"文件創(chuàng)建"+res.createTime);
          }
        })
      }
    })
  }

?第四個(gè)功能是實(shí)現(xiàn)刪除本地文件removeSavedFile這個(gè)api實(shí)現(xiàn)

其實(shí)我覺得在?getSavedFileList也能實(shí)現(xiàn)這個(gè)刪除的功能。就是通過數(shù)組的pop刪除這個(gè)數(shù)組的元素。但是，想想這個(gè)深層次的是刪除這個(gè)元素對(duì)應(yīng)的本地地址。應(yīng)該不是這么簡單就實(shí)現(xiàn)了。

open(){
    wx.chooseMedia({
      count:9,
      success(res){
        var path=res.tempFiles[0].tempFilePath
        wx.downloadFile({
          // 示例 url，并非真實(shí)存在
          url: path,
          success: function (res) {
            const filePath = res.tempFilePath
            wx.openDocument({
              filePath: filePath,
              // fileType:
              success: function (res) {
                console.log('打開文檔成功')
              },
              fail(err){
                console.log(err);
              }
            })
          }
        })
      }
    })
  },

?最后的功能也就是實(shí)現(xiàn)打開文件的效果，openDocument這個(gè)aip給他傳入你需要打開的文件的路徑，而我們通過chooseMedia和downloadFile的方式將路徑保存到本地，然后傳進(jìn)入，就能實(shí)現(xiàn)打開文件的效果文章來源地址http://www.zghlxwxcb.cn/news/detail-444086.html

到了這里，關(guān)于微信小程序文件上傳、下載和圖片處理、文件操作API的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！