前言
本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：
功能说明
为方便演示，本案例仅样式图片文件的上传功能；
实现本地图片（相册、调用相机拍照）上传至服务器；
实现远程图片（填写图片URL地址）下载至服务器；
通过接口实现读取服务器文件管理列表；
变现的可实现简易云盘的功能
小程序实现
效果演示
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> 30 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> 39 40 <view class="weui-btn-area"> 41 <button class="weui-btn" type="primary" bindtap="uploadFileFromUrl">远程下载</button> 42 </view> 43 </view> 44</view>
js代码
1const WXAPI = require('apifm-wxapi') 2WXAPI.init('gooking') 3 4Page({ 5 data: { 6 piclists: undefined // 服务器上的文件列表 7 }, 8 onLoad: function (options) { 9 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 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；
后台可管理文件(图片)
总结
本案例主要使用了 apifm-wxapi 的以下3个方法：
1WXAPI.uploadFile(token, tempFilePath) 2WXAPI.uploadFileFromUrl(remoteFileUrl, ext) 3WXAPI.uploadFileList(path)
关于 apifm-wxapi 更多的使用方法：
本案例Demo代码下载：
拓展
基于上述方法及后台，亲子动手去尝试实现一个个人相处、简易网盘小程序，与大家一起分享。
期待你的进步！
感谢！