首先在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',
})
}
})