前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

功能说明

为方便演示，本案例仅样式图片文件的上传功能；
实现本地图片（相册、调用相机拍照）上传至服务器；
实现远程图片（填写图片URL地址）下载至服务器；
通过接口实现读取服务器文件管理列表；

变现的可实现简易云盘的功能

小程序实现

效果演示

文件上传 - 图1

wxml代码

  1. <button type="primary" bindtap="goRegist"> 注册 / 登录 </button>
  2. <view class="page">
  3.   <view class="page__bd">
  4.     <view class="weui-cells">
  5.       <view class="weui-cell">
  6.         <view class="weui-cell__bd">
  7.           <view class="weui-uploader">
  8.             <view class="weui-uploader__hd">
  9.               <view class="weui-uploader__overview">
  10.                 <view class="weui-uploader__title">图片上传</view>
  11.               </view>
  12.               <view class="weui-uploader__tips">
  13.                 上传提示
  14.               </view>
  15.             </view>
  16.             <view class="weui-uploader__bd">
  17.               <view class="weui-uploader__files" id="uploaderFiles">
  18.                 <view wx:for="{{piclists}}" wx:key="*this" class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
  19.                   <image class="weui-uploader__img" src="https://dcdn.it120.cc/{{item.key}}" mode="aspectFill" />
  20.                 </view>
  21.               </view>
  22.               <view class="weui-uploader__input-box">
  23.                 <view class="weui-uploader__input" bindtap="chooseImage"></view>
  24.               </view>
  25.             </view>
  26.           </view>
  27.         </view>
  28.       </view>
  29.     </view>
  31.     <view class="weui-cells__title">远程下载图片</view>
  32.     <view class="weui-cells weui-cells_after-title">
  33.       <view class="weui-cell ">
  34.         <view class="weui-cell__bd">
  35.           <input class="weui-input" value="{{url}}" placeholder="请输入图片URL地址" bindinput="urlChange" />
  36.         </view>
  37.       </view>
  38.     </view>
  40.     <view class="weui-btn-area">
  41.       <button class="weui-btn" type="primary" bindtap="uploadFileFromUrl">远程下载</button>
  42.     </view>
  43.   </view>
  44. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  6.     piclists: undefined // 服务器上的文件列表
  7.   },
  8.   onLoad: function (options) {
  10.   },
  11.   onShow: function () {
  12.     this.uploadFileList()
  13.   },
  14.   goRegist() {
  15.     wx.navigateTo({
  16.       url: '/pages/auth/index'
  17.     })
  18.   },
  19.   urlChange(e){
  20.     this.data.url = e.detail.value
  21.   },
  22.   uploadFileList(){
  23.     wx.showLoading({
  24.       title: '加载中',
  25.     })
  26.     WXAPI.uploadFileList().then(res => {
  27.       wx.hideLoading()
  28.       console.log(res)
  29.       if (res.code == 0){
  30.         this.setData({
  31.           piclists: res.data
  32.         })
  33.       }
  34.     })
  35.   },
  36.   chooseImage: function (e) {
  37.     const loginToken = wx.getStorageSync('loginToken')
  38.     if (!loginToken) {
  39.       wx.showToast({
  40.         title: '请先登录',
  41.         icon: 'none'
  42.       })
  43.       return
  44.     }
  45.     const _this = this;
  46.     wx.chooseImage({
  47.       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  48.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  49.       count: 1, // 最多选择几张图片
  50.       success: function (res) {
  51.         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  52.         console.log(res)
  53.         WXAPI.uploadFile(loginToken.token, res.tempFilePaths[0]).then(_res => {
  54.           console.log(_res)
  55.           _this.uploadFileList()
  56.         })
  57.       }
  58.     })
  59.   },
  60.   uploadFileFromUrl(){
  61.     if (!this.data.url) {
  62.       wx.showToast({
  63.         title: '地址不能空',
  64.         icon: 'none'
  65.       })
  66.       return
  67.     }
  68.     WXAPI.uploadFileFromUrl(this.data.url, '.png').then(res => {
  69.       console.log(res)
  70.       this.setData({
  71.         url: null
  72.       })
  73.       this.uploadFileList()
  74.     })
  75.   },
  76.   previewImage: function (e) {
  77.     wx.previewImage({
  78.       current: e.currentTarget.id, // 当前显示图片的http链接
  79.       urls: this.data.files // 需要预览的图片http链接列表
  80.     })
  81.   }
  82. })

WXAPI.init(‘gooking’) 这句代码是将你的小程序链接到你的后台，其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

后台可管理文件(图片)

文件上传 - 图2

总结

本案例主要使用了 apifm-wxapi 的以下3个方法：

  1. WXAPI.uploadFile(token, tempFilePath)
  2. WXAPI.uploadFileFromUrl(remoteFileUrl, ext)
  3. WXAPI.uploadFileList(path)

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

拓展

基于上述方法及后台，亲子动手去尝试实现一个个人相处、简易网盘小程序，与大家一起分享。

期待你的进步！
感谢！