文件控制API

本文编辑：  大妖怪浏览 3413 1 版权所有，严禁转载

接口说明:

接口用法：

wxml

<view class="container">
  <template is="head" data="{{title: 'saveFile'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-body-info">
        <block wx:if="{{tempFilePath != ''}}">
          <image src="{{tempFilePath}}" class="image" mode="aspectFit"></image>
        </block>
        <block wx:if="{{tempFilePath === '' && savedFilePath != ''}}">
          <image src="{{savedFilePath}}" class="image" mode="aspectFit"></image>
        </block>
        <block wx:if="{{tempFilePath === '' && savedFilePath === ''}}">
          <view class="image-plus image-plus-nb" bindtap="chooseImage">
            <view class="image-plus-horizontal"></view>
            <view class="image-plus-vertical"></view>
          </view>
          <view class="image-plus-text">请选择文件</view>
        </block>
      </view>
      <view class="btn-area">
        <button type="primary" bindtap="saveFile">保存文件</button>
        <button bindtap="clear">删除文件</button>
        <button bindtap="savedFileList">打开以保存文件列表</button>
        <button bindtap="openDocument">打开pdf</button>
      </view>
    </view>
  </view>

  <modal title="{{dialog.title}}" hidden="{{dialog.hidden}}" no-cancel bindconfirm="confirm">{{dialog.content}}</modal>
</view>

js

Page({
  onLoad: function () {
    this.setData({
      savedFilePath: wx.getStorageSync('savedFilePath')
    })
  },
  data: {
    tempFilePath: '',
    savedFilePath: '',
    dialog: {
      hidden: true
    }
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      count: 1,
      success: function (res) {
        that.setData({
          tempFilePath: res.tempFilePaths[0]
        })
      }
    })
  },
  saveFile: function () {
    if (this.data.tempFilePath.length > 0) {
      var that = this
      wx.saveFile({
        tempFilePath: this.data.tempFilePath,
        success: function (res) {
          that.setData({
            savedFilePath: res.savedFilePath
          })
          wx.setStorageSync('savedFilePath', res.savedFilePath)
          that.setData({
            dialog: {
              title: '保存成功',
              content: '下次进入应用时，此文件仍可用',
              hidden: false
            }
          })
        },
        fail: function (res) {
          that.setData({
            dialog: {
              title: '保存失败',
              content: '应该是有 bug 吧',
              hidden: false
            }
          })
        }
      })
    }
  },
  clear: function () {
    wx.setStorageSync('savedFilePath', '')
    this.setData({
      tempFilePath: '',
      savedFilePath: ''
    })
  },
  confirm: function () {
    this.setData({
      'dialog.hidden': true
    })
  },

  savedFileList:function(){
     wx.getSavedFileList({
      success: function(res) {
        console.log(res.fileList)
      }
    })
  },

  openDocument:function(){
    wx.downloadFile({
      url: 'http://example.com/somefile.pdf',//仅做示例用，非真正的文件路径
      success: function (res) {
        var filePath = res.tempFilePath 
        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      }
    })
  },
})

wxss

.image {
  width: 100%;
  height: 360rpx;
}
.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding: 30rpx;
  height: 420rpx;
  border-top: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
  align-items: center;
  justify-content: center;
}
.image-plus-text{
  color: #888888;
  font-size: 28rpx;
}
.image-plus {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx solid #D9D9D9;
  position: relative;
}
.image-plus-nb{
  border: 0;
}
.image-plus-horizontal {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #d9d9d9;
  width: 4rpx;
  height: 80rpx;
  transform: translate(-50%, -50%);
}
.image-plus-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #d9d9d9;
  width: 80rpx;
  height: 4rpx;
  transform: translate(-50%, -50%);
}
.btn-area{
  margin-top: 60rpx;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30rpx;
}

主要方法：

【wx.saveFile】：【保存文件到本地】

wx.saveFile({
  success: function(res) {
    var tempFilePath = res.tempFilePath
    wx.saveFile({
      tempFilePath: tempFilePath,
      success: function(res) {
        var savedFilePath = res.savedFilePath
      }
    })
  }
})

【wx.getSavedFileList】：【获取本地已保存的文件列表】

success返回参数说明：
| 参数 | 类型 | 描述 |
| —————— | —————— | —————— |
| errMsg | String | 接口调用结果 |
| fileList | ObjectArray | 列表 |

fileList中的项目说明：
| 键 | 类型 | 说明 |
| —————— | —————— | —————— |
| filePath | String | 文件的本地路径 |
| createTime | Number | 文件的保存时的时间戳，从1970/01/01 08:00:00 到当前时间的秒数 |
| size | Number | 文件大小，单位B |

wx.getSavedFileList({
  success: function(res) {
    console.log(res.fileList)
  }
})

【wx.getSavedFileInfo】：【获取本地已保存的文件列表】

success返回参数说明：
| 参数 | 类型 | 描述 |
| —————— | —————— | —————— |
| errMsg | String | 接口调用结果 |
| size | Number | 文件大小，单位B |
| createTime | Number | 文件的保存是的时间戳，从1970/01/01 08:00:00 到当前时间的秒数 |

wx.getSavedFileInfo({
  filePath: 'wxfile://somefile', //仅做示例用，非真正的文件路径
  success: function(res) {
    console.log(res.size)
    console.log(res.createTime)
  }
})

【wx.removeSavedFile】：【删除本地存储的文件】

wx.getSavedFileList({
  success: function(res) {
    if (res.fileList.length > 0){
      wx.removeSavedFile({
        filePath: res.fileList[0].filePath,
        complete: function(res) {
          console.log(res)
        }
      })
    }
  }
})

【wx.openDocument】：【新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx】

wx.getSavedFileList({
  success: function(res) {
    if (res.fileList.length > 0){
      wx.removeSavedFile({
        filePath: res.fileList[0].filePath,
        complete: function(res) {
          console.log(res)
        }
      })
    }
  }
})

bug&tip：
1.tip: 本地文件存储的大小限制为 10M
2.tip:打开文件的路径需要appId，需要https路径，需要在小程序后台配置服务器域名