微信小程序上传图片和视频将数据放进一个数组里传给父组件
时间: 2023-12-06 20:45:30 浏览: 107
实现这个功能需要以下步骤:
1. 在小程序页面中,创建一个数组用于存储上传的图片和视频数据,例如:
```
data: {
files: []
}
```
2. 在页面中添加上传图片和视频的按钮,并绑定对应的事件处理函数,例如:
```
// 上传图片事件处理函数
uploadImage: function() {
var that = this;
wx.chooseImage({
count: 1, // 最多可选择的图片数量
success: function(res) {
var tempFilePaths = res.tempFilePaths; // 获取上传图片的路径
var files = that.data.files; // 获取已经上传的图片和视频数组
files.push(tempFilePaths); // 将新上传的图片路径加入数组
that.setData({
files: files // 更新页面数据
});
}
})
}
// 上传视频事件处理函数
uploadVideo: function() {
var that = this;
wx.chooseVideo({
sourceType: ['album', 'camera'], // 可选择的视频来源
maxDuration: 60, // 最长可选择的视频时长
success: function(res) {
var tempFilePath = res.tempFilePath; // 获取上传视频的路径
var files = that.data.files; // 获取已经上传的图片和视频数组
files.push(tempFilePath); // 将新上传的视频路径加入数组
that.setData({
files: files // 更新页面数据
});
}
})
}
```
3. 在父组件中引入小程序页面,并设置一个接收上传数据的事件处理函数,例如:
```
<child-component bind:uploadData="onUploadData"></child-component>
```
4. 在父组件的 js 文件中定义接收上传数据的事件处理函数,并将上传的数据传递给父组件,例如:
```
Page({
// 接收上传数据的事件处理函数
onUploadData: function(event) {
var files = event.detail.files; // 获取上传的图片和视频数组
// 处理上传的数据
console.log(files);
}
})
```
5. 在小程序页面中触发上传数据的事件,并将上传的数据传递给父组件,例如:
```
// 触发上传数据的事件
triggerUploadData: function() {
var files = this.data.files; // 获取上传的图片和视频数组
this.triggerEvent('uploadData', { files: files }); // 触发上传数据的事件,并传递上传的数据给父组件
}
```
6. 在小程序页面中添加一个确认上传按钮,并绑定触发上传数据的事件处理函数,例如:
```
<button bindtap="triggerUploadData">确认上传</button>
```
阅读全文