如何调取自定义组件中的properties
发布于 6 年前 作者 pingzhu 12547 次浏览 来自 问答

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

}

},

})

3 回复

这句话其实就是这个意思

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

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

回到顶部