AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-05-25 451
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序文件API文章目录微信小程序文件API一、 保存文件二、 获取文件信息三、 获取本地文件列表四、 获取本地文件信息五、 删除本地文件六、 打开文档七、 推荐小程序（欢迎各位大佬指导）一、 保存文件小程序使用wx.saveFile(OBJECT)保存文件到本地。注意：saveFile会把临时文件移动，因此调用成功后传入的tempFilePath将不可用。其OBJECT参数说明如表所示。参数 类型 必填 说明tempFilePath String 是 需要保存的文件的临时路径success Function 否 返回文件的保存路径,res = {savedFiFile(OBJECT)保存

微信小程序文件API

文章目录

一、 保存文件

小程序使用wx.saveFile(OBJECT)保存文件到本地。注意：saveFile会把临时文件移动，因此调用成功后传入的tempFilePath将不可用。其OBJECT参数说明如表所示。

5ac9301f196b761582597e419a0a7dd.png

例题

js文件

 data: {
    src: '' //图片临时地址
  },
  //下载文件
  downloadFile: function () {
    var that = this
    wx.downloadFile({
      url: 'https://ucc.alicdn.com/images/user-upload-01/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;
}

0ba97c7273ca46e6a17e630d4050e62c.png


c88c98d4353341cab2aa5e888c6ec92c.png0daf2f9e0db24711a59351643a764dac.png011dcdc8adcc412684fe6d358d61fce4.png

二、 获取文件信息

小程序使用wx.getFileInfo(OBJECT)获取文件信息，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。OBJECT参数说明如表所示。

a1e48595827837a9dcefa5a4761024b.png

例题

js文件

 data: {
    tempFilePath: '' //临时文件路径
  },
  //下载文件
  downloadFile: function () {
    var that = this
    wx.downloadFile({
      url: 'https://ucc.alicdn.com/images/user-upload-01/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;
}

2ce507be834f4c8dbcdba3b30583e84e.png90b98d9f5e384d20b089fff8a650cbfe.png8920c0377b3e47d1af28e824b0fc8c5d.png8920c0377b3e47d1af28e824b0fc8c5d.png91ade66d81334922988e71875d227dc5.png

三、 获取本地文件列表

小程序使用wx.getSavedFileList(OBJECT)获取本地已保存的文件列表。 OBJECT参数说明如表所示。

参数 类型 必填 说明
success Function 否 接口调用成功的回调函教
fail Function 否 接口调用失败的回调函教
complete Function 否 接口调用结束的回调函数〔调用成功与否都执行)

例题

js文件

 data: {
    savedFilePath: '' //本地文件路径
  },
  //下载和保存文件
  saveFile: function () {
    var that = this
    wx.downloadFile({
      url: 'https://ucc.alicdn.com/images/user-upload-01/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;
}
0e1525a8541b40d39cf5d619657542f3.png de3fed878560409eb1d160741876cde2.png ad6e9dc1ad6e42e2a0441e6d556519f5.png

四、 获取本地文件信息

小程序使用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://ucc.alicdn.com/images/user-upload-01/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;
}

6921c73cd590421d8588343b9b287298.png0298ebd18b484af0932d4a47523e9c1d.png4b0dba94a1b543eaa0d4738ec54e4831.png8af8e8e355ee4c4a9d0d403361f966f0.png98a3444d92a9498fa75b05de56627852.png

五、 删除本地文件

小程序使用wx.removeSavedFile(OBJECT)删除本地已保存的文件。 OBJECT参数说明如

表所示。

参数 类型 必填 说明
filePath String 是 需要删除的文件路径
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函教
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

例题

js文件

 data: {
    savedFilePath: '' //本地文件路径
  },
  //下载和保存文件
  saveFile: function () {
    var that = this
    wx.downloadFile({
      url: 'https://ucc.alicdn.com/images/user-upload-01/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;
}
9ce790a909964458bf6a712904921fd0.png f4801e4be0a949c4a89db9524eeec2e6.png 2cd670974156417f90f7d401a811f706.png abecebd2a2664af394ffe071955e8133.png 5470dbe9370541a69d26597d487b3cc4.png

六、 打开文档

小程序使用wx.openDocument(OBJECT)新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。OBJECT参数说明如表所示。

4db667a17c843047634494e043a4d36.png

例题

js文件

data: {
    path: ''
  },
  //下载文件
  downloadFile: function () {
    var that = this
    wx.downloadFile({
      url: 'https://ucc.alicdn.com/images/user-upload-01/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;
}

282988d2c4a24a14b31d9842ae696cb4.pngbffd8c2995a94b68a4cb016d8f6a7c3e.png

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

文章标签：
JavaScript
API
数据格式
JSON
小程序
关键词：
API开发
开发API
API文件
微信开发
开发微信小程序
游客5yjykjssz3skc
目录
相关文章
API小知识
|
3天前
|
监控 供应链 搜索推荐
阿里妈妈商品详情API接口：开发、应用与收益的深度剖析
阿里妈妈是阿里巴巴旗下的数字营销平台，其商品详情API接口为开发者提供了获取淘宝、天猫等电商平台商品详细信息的工具。本文介绍了该接口的开发流程、应用场景及带来的收益，揭示了其在电商生态中的重要地位。
API小知识
25 6
API小知识
|
3天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益（一篇文章全明白）
1688作为全球知名的B2B电商平台，通过开放的原数据API接口，为开发者提供了丰富的数据资源，涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益，包括提升流量、优化库存管理、增强用户体验等方面。
API小知识
26 6
API小知识
|
5天前
|
监控 搜索推荐 API
京东商品详情API接口的开发、应用与收益探索
在数字化和互联网高速发展的时代，京东通过开放商品详情API接口，为开发者、企业和商家提供了丰富的数据源和创新空间。本文将探讨该API接口的开发背景、流程、应用场景及带来的多重收益，包括促进生态系统建设、提升数据利用效率和推动数字化转型等。
API小知识
19 3
API小知识
|
10天前
|
供应链 搜索推荐 API
探索1688榜单商品详细信息API接口：开发、应用与收益
本文深入探讨了1688榜单商品详细信息API接口的开发与应用，涵盖接口概述、开发条件、调用方法及数据处理等内容。该API帮助企业高效获取1688平台商品信息，应用于商品信息采集、校验、同步与数据分析等领域，有效提升了企业的运营效率、库存管理、销售转化率及市场策略制定能力，降低了采购成本，提升了客户满意度。
API小知识
36 9
API小知识
|
13天前
|
算法 Java API
如何使用Java开发获得淘宝商品描述API接口？
本文详细介绍如何使用Java开发调用淘宝商品描述API接口，涵盖从注册淘宝开放平台账号、阅读平台规则、创建应用并申请接口权限，到安装开发工具、配置开发环境、获取访问令牌，以及具体的Java代码实现和注意事项。通过遵循这些步骤，开发者可以高效地获取商品详情、描述及图片等信息，为项目和业务增添价值。
API小知识
47 10
API小知识
|
13天前
|
存储 API 数据库
使用Python开发获取商品销量详情API接口
本文介绍了使用Python开发获取商品销量详情的API接口方法，涵盖API接口概述、技术选型（Flask与FastAPI）、环境准备、API接口创建及调用淘宝开放平台API等内容。通过示例代码，详细说明了如何构建和调用API，以及开发过程中需要注意的事项，如数据库连接、API权限、错误处理、安全性和性能优化等。
API小知识
58 5
API小知识
|
12天前
|
数据可视化 搜索推荐 API
速卖通获得aliexpress商品详情API接口的开发、应用与收益。
速卖通（AliExpress）作为阿里巴巴旗下的跨境电商平台，为全球消费者提供丰富商品。其开放平台提供的API接口支持开发者获取商品详情等信息，本文探讨了速卖通商品详情API的开发流程、应用场景及潜在收益，包括提高运营效率、降低成本、增加收入和提升竞争力等方面。
API小知识
30 1
蚝油菜花
|
9天前
|
人工智能 自然语言处理 API
Multimodal Live API：谷歌推出新的 AI 接口，支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口，能够处理文本、音频和视频输入，提供自然流畅的对话体验，适用于多种应用场景。
蚝油菜花
54 3
Multimodal Live API：谷歌推出新的 AI 接口，支持多模态交互和低延迟实时互动
程序员海军
|
4天前
|
前端开发 API 数据库
Next 编写接口api
Next 编写接口api
程序员海军
25 3
winx_19970108018
|
10天前
|
XML JSON 缓存
阿里巴巴商品详情数据接口（alibaba.item_get) 丨阿里巴巴 API 实时接口指南
阿里巴巴商品详情数据接口（alibaba.item_get）允许商家通过API获取商品的详细信息，包括标题、描述、价格、销量、评价等。主要参数为商品ID（num_iid），支持多种返回数据格式，如json、xml等，便于开发者根据需求选择。使用前需注册并获得App Key与App Secret，注意遵守使用规范。
winx_19970108018
31 6

热门文章

最新文章

  • 1
    小程序审核常见驳回类型
  • 2
    小程序自定义弹窗禁止底部内容滚动（滚动穿透问题）
  • 3
    小程序云开发联表数据查询以及云函数中的应用
  • 4
    小程序：开发者工具和真机调试能请求后台数据，手机预览请求不到数据，快速解决
  • 5
    【小程序开发框架选型】7大小程序开发框架，哪一个更适合你？
  • 6
    笑联 x mPaaS | 12 个模块，全面小程序化，如何打造真正的一次开发复用多端？
  • 7
    小程序-uniApp：区域滚动、下拉刷新、上拉加载更多
  • 8
    小程序根据返回值是否为空判断标签是否显示
  • 9
    小程序中加载html5地图界面链接
  • 10
    小程序动端组件库Vant Weapp的使用
  • 1
    Java Stream API详解与使用
    94
  • 2
    Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
    85
  • 3
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    73
  • 4
    Java 8新特性之Lambda表达式与Stream API的深度解析
    103
  • 5
    Linux系统编程之文件编程常用API回顾和文件编程一般步骤
    83
  • 6
    阿里云微服务引擎及 API 网关 2024 年 4 月产品动态
    390
  • 7
    阿里云微服务引擎 MSE 及 API 网关 2024 年 04 月产品动态
    271
  • 8
    智能体-Agent能力升级！新增Assistant API & Tools API服务接口
    555
  • 9
    使用Performance API进行性能监控
    108
  • 10
    RESTful API的最佳实践
    67

    • 相关课程

    更多
  • IoT小程序框架课程
  • C++ 入门教程开发文档
  • 前端开发框架Bootstrap使用教程
  • React 入门教程开发文档
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    DataWorks