"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

文件上传

前言


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


《创建 HelloWorld 项目》

《使用 “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 更多的使用方法:


《apifm-wxapi使用说明》


本案例Demo代码下载:


《apifm-wxapi使用Demo程序》


拓展


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


期待你的进步!

感谢!