本文編輯：  大妖怪瀏覽 3663 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路徑，需要在小程序后臺配置服務器域名