微信小程序云开发自定义上传组件

首先在miniprograme下的components目录下新建目录uploader并新建组件(component) uploader

wxml用于显示上传按钮和图片显示

<view class="form-item">
  <view class="weui-cells__title">图片</view>
  <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
          <view class="weui-cell__bd">
              <button type="default" size="12" bindtap="uploader"><image src="/images/upload.png"></image></button>
          </view>
          <view wx:if="{{ image != '' }}" class="show-image">
            <image src="{{ image }}" mode="widthFix"></image>
          </view>
      </view>
  </view>
</view>

样式需要在组件样式上写才有用

.weui-cells__title {
  margin-top: 16px;
  margin-bottom: 3px;
  padding-left: 16px;
  padding-right: 16px;
  color: rgba(0,0,0,.5);
  font-size: 14px;
}
.weui-cell .weui-cell__bd {
  width: 4rem;
  padding-top: 0.5rem;
}
.weui-cell .weui-cell__bd image {
  width: 2rem;
  height: 2rem;
}

然后就是上传图片和显示图片了

这里先调用组件，要调用组件需要在page的json中配置组件

{
  "component": true,
  "usingComponents": {
    "uploader": "/components/uploader/uploader"
  }
}

如何在page的wxml中使用

<uploader image="{{ image }}" bind:myevent="getImage"></uploader>

image表示要传给组件的值，bind为自定义组件事件，用于page和component传值

getImage 是page的方法，用于获取组件传回来的值，需要写在page的js中

getImage: function(e) {
    let that = this
    that.setData({
      image: e.detail.image
    })
  },

接下来就是在组件中上传图片

首选需要获取到page传过来的值，在component的js中的properties内定义

properties: {
    image: {
      type: String,
      value: ''
    },
  },

然后在component中的methds中定义方法，即wxml的button的uploader事件

methods: {
    uploader: function () {
      let that = this
      wx.chooseImage({
        success: function (res) {
          const filePath = res.tempFilePaths[0]
          const tempFile = filePath.split('.')
          const cloudPath = 'dy-img-' + tempFile[tempFile.length - 2]
          wx.cloud.uploadFile({
            cloudPath: cloudPath,
            filePath: filePath,
            success: res => {
              that.setData({
                image: res.fileID
              })
              that.triggerEvent('myevent', { image: res.fileID })
            },
            fail: err => {
              wx.showToast({
                title: '上传失败',
                icon: 'fail',
                duration: 2000,
              })
            }
          })
        },
        fail: err => {
          wx.showToast({
            title: '请选择文件',
            icon: 'fail',
            duration: 2000,
          })
        }
      })
    }
  },

然后就是page中保存数据

formSubmit: function (e) {
    let that = this
    const name = e.detail.value.name
    const categoryId = e.detail.value.category_id
    const status = e.detail.value.status
    const sort = e.detail.value.sort
    const id = e.detail.value.id
    if (name != '') {
      if (id == '') {
        // 添加
        db.collection('article').add({
          data: {
            name: name,
            category_id: categoryId,
            image: that.data.image,
            status: status,
            sort: sort,
          },
          success: function (res) {
            wx.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000,
              success: function () {
                wx.redirectTo({
                  url: '/pages/dyadmin/article/index',
                })
              }
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '提交失败',
              icon: 'fail',
              duration: 2000,
            })
          }
        })
      } else {
        // 更新
        db.collection('article').doc(id).update({
          data: {
            name: name,
            category_id: categoryId,
            image: that.data.image,
            status: status,
            sort: sort,
          },
          success: function (res) {
            wx.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000,
              success: function () {
                wx.redirectTo({
                  url: '/pages/dyadmin/article/index',
                })
              }
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '提交失败',
              icon: 'fail',
              duration: 2000,
            })
          }
        })
      }
    } else {
      wx.showToast({
        title: '请填写名称',
        icon: 'fail',
        duration: 2000,
      })
    }

  },

 

 

uploader.js

// components/uploader/uploader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    image: {
      type: String,
      value: ''
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },

  /**
   * 组件的方法列表
   */
  methods: {
    uploader: function () {
      let that = this
      wx.chooseImage({
        success: function (res) {
          const filePath = res.tempFilePaths[0]
          const tempFile = filePath.split('.')
          const cloudPath = 'dy-img-' + tempFile[tempFile.length - 2]
          wx.cloud.uploadFile({
            cloudPath: cloudPath,
            filePath: filePath,
            success: res => {
              that.setData({
                image: res.fileID
              })
              that.triggerEvent('myevent', { image: res.fileID })
            },
            fail: err => {
              wx.showToast({
                title: '上传失败',
                icon: 'fail',
                duration: 2000,
              })
            }
          })
        },
        fail: err => {
          wx.showToast({
            title: '请选择文件',
            icon: 'fail',
            duration: 2000,
          })
        }
      })
    }
  },
})

 

form.js

// miniprogram/pages/dyadmin/article/form.js
const db = wx.cloud.database()
const tool = require('../../../utils/tool.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    model: {},
    image: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const id = options.id
    let that = this
    if (id != undefined) {
      db.collection('article').doc(id).get({
        success: function (res) {
          that.setData({
            model: res.data,
            image: res.data.image
          })
        }
      })
    } else {
      const model = {
        _id: '',
        name: '',
        status: true,
        sort: 0
      }
      that.setData({
        model: model
      })
    }
  },

  getImage: function(e) {
    let that = this
    that.setData({
      image: e.detail.image
    })
  },

  formSubmit: function (e) {
    let that = this
    const name = e.detail.value.name
    const status = e.detail.value.status
    const sort = e.detail.value.sort
    const id = e.detail.value.id
    if (name != '') {
      if (id == '') {
        // 添加
        db.collection('article').add({
          data: {
            name: name,
            image: that.data.image,
            status: status,
            sort: sort,
          },
          success: function (res) {
            wx.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000,
              success: function () {
                wx.redirectTo({
                  url: '/pages/dyadmin/article/index',
                })
              }
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '提交失败',
              icon: 'fail',
              duration: 2000,
            })
          }
        })
      } else {
        // 更新
        db.collection('article').doc(id).update({
          data: {
            name: name,
            image: that.data.image,
            status: status,
            sort: sort,
          },
          success: function (res) {
            wx.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000,
              success: function () {
                wx.redirectTo({
                  url: '/pages/dyadmin/article/index',
                })
              }
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '提交失败',
              icon: 'fail',
              duration: 2000,
            })
          }
        })
      }
    } else {
      wx.showToast({
        title: '请填写名称',
        icon: 'fail',
        duration: 2000,
      })
    }

  },

  listAction: function () {
    wx.redirectTo({
      url: '/pages/dyadmin/article/index',
    })
  },
  homeAction: function () {
    wx.redirectTo({
      url: '/pages/dyadmin/home/index',
    })
  }
})