【微信小程序开发小白零基础入门】微信小程序文件API【建议收藏】

移动开发 2022-03-23 11:05:18 阅读次数: 0

微信小程序文件API

文章目录

一、 保存文件

小程序使用wx.saveFile(OBJECT)保存文件到本地。注意：saveFile会把临时文件移动，因此调用成功后传入的tempFilePath将不可用。其OBJECT参数说明如表所示。
参数 类型 必填 说明
tempFilePath String 是 需要保存的文件的临时路径
success Function 否 返回文件的保存路径,res = {savedFilePath: '文件的保存路径?}
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

例题

js文件

 data: {
    
    
    src: '' //图片临时地址
  },
  //下载文件
  downloadFile: function () {
    
    
    var that = this
    wx.downloadFile({
    
    
      url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center',
      success: function (res) {
    
    
        if (res.statusCode === 200) {
    
    
          that.setData({
    
    
            src: res.tempFilePath
          })
        }
      }
    })
  },
  //保存文件
  saveFile: function () {
    
    
    var that = this
    let src = this.data.src
    if (src == '') {
    
    
      wx.showToast({
    
    
        title: '请先下载文件！',
        icon: 'none'
      })
    } else {
    
    
      wx.saveFile({
    
    
        tempFilePath: src,
        success: function (res) {
    
    
          console.log('文件被保存到：' + res.savedFilePath)
          wx.showToast({
    
    
            title: '保存成功！'
          })
        }
      })
    }
  },

json文件

{
    
    "navigationBarTitleText": "智慧云工具箱-微信小程序文件API"

}

wxml文件

<view class='page-body'>
    <view class='title'>1. 保存文件的简单应用</view>
    <view class='demo-box'>
      <view class='title'>(1)下载文件</view>
      <button type="primary" bindtap="downloadFile">下载文件</button>
      <image wx:if='{
    
    {src}}' src='{
    
    {src}}' mode='widthFix'></image>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)保存文件</view>
      <button type="primary" bindtap="saveFile">保存文件</button>
    </view>
  </view>

wxss文件

button{
    
    
  margin: 15rpx;
}

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

二、 获取文件信息

小程序使用wx.getFileInfo(OBJECT)获取文件信息，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。OBJECT参数说明如表所示。
参数 类型 必填 说明
filePath String 是 本地文件路径
digestAlgorithm String 否 计算文件摘要的算法。默认值md5，有效值: md5, sha1
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接调用结束的回调函数〔调用成功与否都执行)

例题

js文件

 
 data: {
    
    
    tempFilePath: '' //临时文件路径
  },
  //下载文件
  downloadFile: function () {
    
    
    var that = this
    wx.downloadFile({
    
    
      url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
      success: function (res) {
    
    
        // 只要服务器有响应数据，就会进入 success 回调
        if (res.statusCode === 200) {
    
    
          console.log('文件被下载到：' + res.tempFilePath)
          that.setData({
    
    
            tip1: '提示：文件已下载。',
            tempFilePath: res.tempFilePath
          })
        }
      }
    })
  },
  //获取临时文件信息
  getFileInfo: function () {
    
    
    var that = this
    let tempFilePath = this.data.tempFilePath
    if (tempFilePath == '') {
    
    
      //文件尚未保存到本地
      wx.showModal({
    
    
        title: '提示',
        content: '请先下载文件！',
        showCancel: false
      })
    } else {
    
    
      //获取保存的文件信息
      wx.getFileInfo({
    
    
        filePath: tempFilePath,
        success: function (res) {
    
    
          that.setData({
    
    
            tip2: '文件大小：' + res.size + '字节。'
          })
        }
      })
    }
  },

wxml文件

  <view class='page-body'>
    <view class='title'>2. 获取临时文件信息的简单应用</view>
    <view class='demo-box'>
      <view class='title'>(1)下载文件</view>
      <button type="primary" bindtap="downloadFile">下载文件</button>
      <view class='title'>{
    
    {
    
    tip1}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)获取临时文件信息</view>
      <button type="primary" bindtap="getFileInfo">获取文件信息</button>
      <view class='title'>{
    
    {
    
    tip2}}</view>
    </view>
  </view>

wxss文件

button{
    
    
  margin: 15rpx;
}

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、 获取本地文件列表

小程序使用wx.getSavedFileList(OBJECT)获取本地已保存的文件列表。 OBJECT参数说明如表所示。
参数 类型 必填 说明
success Function 否 接口调用成功的回调函教
fail Function 否 接口调用失败的回调函教
complete Function 否 接口调用结束的回调函数〔调用成功与否都执行)

例题

js文件

 data: {
    
    
    savedFilePath: '' //本地文件路径
  },
  //下载和保存文件
  saveFile: function () {
    
    
    var that = this
    wx.downloadFile({
    
    
      url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
      success: function (res) {
    
    
        // 只要服务器有响应数据，就会进入 success 回调
        if (res.statusCode === 200) {
    
    
          //保存文件到本地
          wx.saveFile({
    
    
            tempFilePath: res.tempFilePath,
            success: function (res) {
    
    
              console.log('文件保存成功！')
              that.setData({
    
    
                tip1: '提示：文件已保存。',
                savedFilePath: res.savedFilePath
              })
            }
          })
        }
      }
    })
  },
  //获取本地文件列表
  getSavedFileList:function(){
    
    
    var that = this
    wx.getSavedFileList({
    
    
      success: function (res) {
    
    
        console.log(res.fileList)
        that.setData({
    
    
          tip2: '提示：文件列表已获取。'
        })
      }
    })
  },

json文件

{
    
    "navigationBarTitleText": "智慧云工具箱-微信小程序文件API"

}

wxml文件

<view class='page-body'>
    <view class='title'>3. 获取本地文件列表的简单应用</view>
    <view class='demo-box'>
      <view class='title'>(1)保存文件</view>
      <button type="primary" bindtap="saveFile">保存文件</button>
      <view class='title'>{
    
    {
    
    tip1}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)获取本地文件列表</view>
      <button type="primary" bindtap="getSavedFileList">获取文件列表</button>
      <view class='title'>{
    
    {
    
    tip2}}</view>
    </view>
  </view>

wxss文件

button{
    
    
  margin: 15rpx;
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

四、 获取本地文件信息

小程序使用wx.getSavedFileInfo(OBJECT)获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，请使用 wx.getFileInfo 接口。 OBJECT参数说明如表所示。
参数 类型 必填 说明
filePath String 是 文件路径
success Function 否 接口调用成功的回调函数。返回结果见success返回参教说明
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功与否都执行)

例题

js文件

 data: {
    
    
    tempFilePath: '', //临时文件路径
    savedFilePath: '' //本地文件路径
  },
  //下载文件
  downloadFile: function () {
    
    
    var that = this
    wx.downloadFile({
    
    
      url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
      success: function (res) {
    
    
        // 只要服务器有响应数据，就会进入 success 回调
        if (res.statusCode === 200) {
    
    
          console.log('文件被下载到：' + res.tempFilePath)
          that.setData({
    
    
            tip1: '提示：文件已下载。',
            tempFilePath: res.tempFilePath
          })
        }
      }
    })
  },
  //保存文件
  saveFile: function () {
    
    
    var that = this
    let tempFilePath = this.data.tempFilePath
    if (tempFilePath == '') {
    
    
      //文件尚未下载
      wx.showModal({
    
    
        title: '提示',
        content: '请先下载文件！',
        showCancel: false
      })
    } else {
    
    
      //保存文件到本地
      wx.saveFile({
    
    
        tempFilePath: tempFilePath,
        success: function (res) {
    
    
          console.log('文件被保存到：' + res.savedFilePath)
          that.setData({
    
    
            tip2: '提示：文件已保存。',
            savedFilePath: res.savedFilePath
          })
        }
      })
    }
  },
  //获取文件信息
  getSavedFileInfo: function () {
    
    
    var that = this
    let savedFilePath = this.data.savedFilePath
    if (savedFilePath == '') {
    
    
      //文件尚未保存到本地
      wx.showModal({
    
    
        title: '提示',
        content: '请先保存文件！',
        showCancel: false
      })
    } else {
    
    
      //获取保存的文件信息
      wx.getSavedFileInfo({
    
    
        filePath: savedFilePath,
        success: function (res) {
    
    
          that.setData({
    
    
            tip3: '文件大小：' + res.size + '字节。'
          })
        }
      })
    }
  },

json文件

{
    
    "navigationBarTitleText": "智慧云工具箱-微信小程序文件API"

}

wxml文件

<view class='container'>
  <include src='../../common/head.wxml' />
  <view class='page-body'>
    <view class='title'>4. 获取本地文件信息的简单应用</view>
    <view class='demo-box'>
      <view class='title'>(1)下载文件</view>
      <button type="primary" bindtap="downloadFile">下载文件</button>
      <view class='title'>{
    
    {
    
    tip1}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)保存文件</view>
      <button type="primary" bindtap="saveFile">保存文件</button>
      <view class='title'>{
    
    {
    
    tip2}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(3)获取本地文件信息</view>
      <button type="primary" bindtap="getSavedFileInfo">获取文件信息</button>
      <view class='title'>{
    
    {
    
    tip3}}</view>
    </view>
  </view>

wxss文件

button{
    
    
  margin: 15rpx;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、 删除本地文件

小程序使用wx.removeSavedFile(OBJECT)删除本地已保存的文件。 OBJECT参数说明如表所示。
参数 类型 必填 说明
filePath String 是 需要删除的文件路径
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函教
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

例题

js文件

 data: {
    
    
    savedFilePath: '' //本地文件路径
  },
  //下载和保存文件
  saveFile: function () {
    
    
    var that = this
    wx.downloadFile({
    
    
      url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
      success: function (res) {
    
    
        // 只要服务器有响应数据，就会进入 success 回调
        if (res.statusCode === 200) {
    
    
          console.log('文件被下载到：' + res.tempFilePath)
          //保存文件到本地
          wx.saveFile({
    
    
            tempFilePath: res.tempFilePath,
            success: function (res) {
    
    
              console.log('文件被保存到：' + res.savedFilePath)
              that.setData({
    
    
                tip1: '提示：文件已保存。',
                savedFilePath: res.savedFilePath
              })
            }
          })
        }
      }
    })
  },
  //删除文件
  removeFile: function () {
    
    
    var that = this
    let savedFilePath = this.data.savedFilePath
    if (savedFilePath == '') {
    
    
      //文件尚未保存
      wx.showModal({
    
    
        title: '提示',
        content: '请先下载和保存文件！',
        showCancel: false
      })
    } else {
    
    
      //删除本地文件
      wx.removeSavedFile({
    
    
        filePath: savedFilePath,
        success: function (res) {
    
    
          that.setData({
    
    
            tip2: '提示：文件已被删除。'
          })
        }
      })
    }
  },
  //获取文件信息
  getSavedFileInfo: function () {
    
    
    var that = this
    let savedFilePath = this.data.savedFilePath
    //获取保存的文件信息
    wx.getSavedFileInfo({
    
    
      filePath: savedFilePath,
      success: function (res) {
    
    
        that.setData({
    
    
          tip3: '文件大小：' + res.size + '字节。'
        })
      },
      fail: function (res) {
    
    
        console.log(res)
        that.setData({
    
    
          tip3: '提示：文件不存在。'
        })
      }
    })
  },

json文件

{
    
    "navigationBarTitleText": "智慧云工具箱-微信小程序文件API"

}

wxml文件

 <view class='page-body'>
    <view class='title'>5. 删除已保存文件的简单应用</view>
    <view class='demo-box'>
      <view class='title'>(1)下载并保存文件</view>
      <button type="primary" bindtap="saveFile">下载并保存文件</button>
      <view class='title'>{
    
    {
    
    tip1}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)删除文件</view>
      <button type="primary" bindtap="removeFile">删除文件</button>
      <view class='title'>{
    
    {
    
    tip2}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(3)获取本地文件信息</view>
      <button type="primary" bindtap="getSavedFileInfo">获取文件信息</button>
      <view class='title'>{
    
    {
    
    tip3}}</view>
    </view>
  </view>

wxss文件

button{
    
    
  margin: 15rpx;
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

六、 打开文档

小程序使用wx.openDocument(OBJECT)新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。OBJECT参数说明如表所示。
参数 类型 必填 说明
filePath String 是 文件路径，可通过downFile获得
fileTyne String 否 文件类型，指定文件类型打开文件，有效值doc, xls, ppt, pdf, docx, xlsx, pptx (最低版本1.4.0)
success Function 否 接口调用成功的回调函教
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函教〔调用成功与否都执行)

例题

js文件

data: {
    
    
    path: ''
  },
  //下载文件
  downloadFile: function () {
    
    
    var that = this
    wx.downloadFile({
    
    
      url: 'https://img-blog.csdnimg.cn/2c838b6cb29e4d9dbbbc1197edc83c36.jpg#pic_center', //用户可以更改
      success: function (res) {
    
    
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
    
    
          console.log(res)
          that.setData({
    
    
            tip: '提示：文件已下载',
            path: res.tempFilePath
          })
        }
      }
    })
  },
  //打开文件
  openDocument: function () {
    
    
    let path = this.data.path
    //文档尚未下载
    if (path == '') {
    
    
      wx.showModal({
    
    
        title: '提示',
        content: '请先下载文档！',
        showCancel: false
      })
    }
    //打开文档
    else {
    
    
      wx.openDocument({
    
     filePath: path })
    }
  },

json文件

{
    
    "navigationBarTitleText": "智慧云工具箱-微信小程序文件API"

}

wxml文件

  <view class='page-body'>
    <view class='title'>6. 打开文档的简单应用</view>
    <view class='demo-box'>
      <view class='title'>(1)下载文件</view>
      <button type="primary" bindtap="downloadFile">下载文件</button>
      <view class='title'>{
    
    {
    
    tip}}</view>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)打开文件</view>
      <button type="primary" bindtap="openDocument">打开文件</button>
    </view>
  </view>

wxss文件

button{
    
    
  margin: 15rpx;
}

在这里插入图片描述
在这里插入图片描述

七、 推荐小程序（欢迎各位大佬指导）

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44967475/article/details/120751714
今日推荐
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
虽然老乡鸡开源的不是代码，但背后的原因却让人很暖心
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
周排行
使用Redis中间件解决商品秒杀活动中出现的超卖问题（使用Java多线程模拟高并发环境）
野指针及c++指针使用注意点
redis 3.0　新特性
(翻译)火狐操作系统javascript API
微信小程序开发入门
mysql数据查询之五子句(where、group by、having、order by和limit)
Codeforces Round #517 Div. 1翻车记
在caffe 中实现Generative Adversarial Nets（二）
企业级漏洞扫描工具
java byte数组与String互转
每日归档
更多
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022