收藏
回答

如何调取自定义组件中的properties

问题模块
API和组件

写了个自定义组件,用于上传九宫格的图片,但是调用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


}



},





})


最后一次编辑于  2017-11-22  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • 这都申请了
    这都申请了
    2017-11-22

    properties里面的值和data里面的值最后都属于data,都是this.data.***,properties只是暴露给其他页面用的属性

    2017-11-22
    赞同
    回复
  • 农佳捷 Charles
    农佳捷 Charles
    2017-11-22

    感谢!官方文档里面好像没有说明这个问题!this.data.uploadUrl 调取成功了

    2017-11-22
    赞同
    回复
  • 这都申请了
    这都申请了
    2017-11-22


    这句话其实就是这个意思

    2017-11-22
    赞同
    回复