写了个自定义组件,用于上传九宫格的图片,但是调用properties 出错,显示 undefine,我的调用方法是 this.properties.uploadUrl.value ,但是无法获得值
请问,怎么获取properties中的值?
附源码
//entryFormComponent.js
//获取小程序的实例
const app = getApp()
// 组件构造器
Component({
properties: {
//上传的路径
uploadUrl: {
type: String,
value: ''
},
// 服务器端接受文件的key
name: {
type: String,
value: ''
},
},
data: {
},
methods: {
//增加图片占位
// 参数 that为组件component的实例
_addImagePlaceholder: function () {
//var placeholder = []
var placeholder = this.data.images
var imagePlaceholder = { index: -1, url: "static/images/add_img_48px.png" }
placeholder.push(imagePlaceholder)
this.setData({
images: placeholder
})
},
chooseImage: function (e) {
var that = this //这里的意思是,取当前page对象(component对象)
//var uploadUrl = this.properties.uploadUrl.value //获取组件的上传路径
//var name = this.properties.name.value //获取组件上传文件的key
console.log(this.properties)
// 这里是在控件绑定的函数中,调用微信的原生API,所以才会弹出选择图片(微信的原生能力)
wx.chooseImage({
//微信原生API wx.chooseImage的回调函数
success: function (res) {
console.log('上传执行了')
var tempFilePaths = res.tempFilePaths //获取上传文件的临时路径
//调用微信原生的上传API
wx.uploadFile({
url: 'http://127.0.0.1:8000/subscribe/upload/', //这个地方硬编码了,不好!
//url: uploadUrl,
filePath: tempFilePaths[0],
name: 'file', //这是传递给后台的key,在POST的数据中file的key对应的内容
//name: name,
formData: {
/* 额外传给服务器端的数据 也是k-v的形式
'user': 'test'
*/
},
//微信原生API wx.uploadFile的回调函数
success: function (res) {
var data = res.data
//do something
var url_ = JSON.parse(res.data)
var url = url_.file_url
//console.log(res.data)
console.log(url_)
var index = that.data.images.length - 1 // 当前位置是images数组长度-1
//var index = 0
var newImage = { index: index, url: url } //构造一个新的图片实例
var images = that.data.images //插入图片数组末尾
//var images = []
images.pop() // 先将图片占位符弹出来
images.push(newImage) //再插入新的上传的图片
that.setData({//注意不是是this.setData(),在回调函数中应该注意这个问题
images: images
})
//增加一个新的图片占位
that._addImagePlaceholder()
console.log(images)
}
})
}
})
},
//删除指定Index的图片
delImagePlaceholder: function (event) {
var index = event.currentTarget.dataset.index //获取当前点击删除的图片的index
var images = this.data.images
images.splice(index, 1)
this.setData({
images: this._synIndex(images) //调用index同步,保证删除图片之后images中的index与视图中的一致
})
console.log(images)
},
//将this.images中的index与视图层的排序保持一致
_synIndex: function (images) {
//最后一个是图片占位符,index是-1,不需要改变其index
var images = images
for (var i = 0; i < images.length - 1; i++) {
images[i].index = i
}
return images
}
},
})
这句话其实就是这个意思
properties里面的值和data里面的值最后都属于data,都是this.data.***,properties只是暴露给其他页面用的属性
感谢!官方文档里面好像没有说明这个问题!this.data.uploadUrl 调取成功了