微信小程序文件上传、下载和图片处理、文件操作API的使用

这次按照我的理解来做这部分的笔记

首先，复习上节课所学的内容。就是网络请求api的使用

现在我有一个需求就是点击按钮实现获取后端返回的图片

先打开服务器

看一下我们要返回的图片路径

书写结构

看一下返回来的数据。是在data下的banners里。因此我们封装一下

这样就做了一个简单的轮播图效果

<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})
      }
    })
  },

现在如果我们想要将一张网络上的图片保存到本地，那么如何使用呢？

这里我们需要用这个api

一个简单的页面结构，要实现俩种功能。分别是读取网络图片到本地，和下载图片到我们的后端服务器中

把这张网络图片下载到我们的小程序，然后转换为本地路径，渲染到页面上

这里我们调用downloadFile，当访问请求没有问题时，它会返回给我们一个result。而我们打印这个result中明显的发现.tempFilePath就是相对应的本地图片路径。那么我们简单的渲染到页面就可以了

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搭一个后端服务器。然后把资源放进行。

这里我们采用Windows版phpstudy下载 - 小皮面板(phpstudy) (xp.cn) phpstudy，这个免费的工具

直接启动服务器就可以了

把这个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"];
}
?>

这部分，有点php基础的应该都能看懂，就不必介绍了。在这里我还需要新建一个uploads这个目录。

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);
        }
      })
    },

解析了这段代码的实现方式：

wx.chooseMedia() 方法用于选择媒体文件，包括图片、音频和视频等类型。该方法接受两个参数：count 表示最多可选择的文件数量，默认为 9;success 是一个回调函数，当用户选择完媒体文件后会触发该回调函数。在该函数内部，通过 res.tempFiles[0].tempFilePath 获取用户选中的文件路径。
wx.uploadFile() 方法用于上传文件，包括图片、音频和视频等类型。该方法接受五个参数：filePath 表示要上传的文件路径；name 表示上传到服务器上的文件名；url 表示上传到服务器的 URL 地址；success 是一个回调函数，当文件上传成功后会触发该回调函数；fail 是一个回调函数，当文件上传失败时会触发该回调函数。在该函数内部，通过 res.data 获取服务器返回的数据。
在 fail(err) 回调函数中，会输出上传失败的信息。
整个 upload() 方法的作用是先调用 wx.chooseMedia() 方法选择媒体文件，然后调用 wx.uploadFile() 方法上传文件。

这里要注意的一点就这个php的name必须要跟我们成功回调里面name是相同的。用人话来说就是先调用chooseMedia这个api打开文件，因为我们这里设置了count:9因此一次最多能选择9个文件。选择成功执行成功回调，这里在调用uploadFile这个api，我先拿到本地图片路径，然后保存到url（服务器）的路径下面就可以了

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

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这个函数实现的是，先读取网络图片到本地，然后通过saveFile这个api保存到本地

我们这里的http路径指的是小程序内部的路径

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)+"个文件");
          console.log("文件创建时间:"+file.createTime);
          console.log("文件大小:"+file.size);
          console.log("文件本地路径:"+file.filePath);

        }
      }
    })
  },

第二个功能是获取本地文件列表，通过getSavedFileList这个api实现。因为成功回调返回的是一个数组，所有我们可以通过遍历数组的方式来，遍历数组中的每一个元素

通过我们可以调用相对应的属性，例如res.size就是文件的大小

第三个功能是获取本地文件信息，也就是调用 getSavedFileInfo这个api。其实上一个获取列表的方式能获得单一的文件，这个getSavedFileInfo就是基于getSavedFileList的进一步的封装

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

第四个功能是实现删除本地文件removeSavedFile这个api实现

其实我觉得在 getSavedFileList也能实现这个删除的功能。就是通过数组的pop删除这个数组的元素。但是，想想这个深层次的是删除这个元素对应的本地地址。应该不是这么简单就实现了。

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

最后的功能也就是实现打开文件的效果，openDocument这个aip给他传入你需要打开的文件的路径，而我们通过chooseMedia和downloadFile的方式将路径保存到本地，然后传进入，就能实现打开文件的效果

微信小程序文件上传、下载和图片处理、文件操作API的使用

猜你喜欢