小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我封装了一上传组件,在页面上引用组件后,分别进行传值。但显示有问题,并没有按传值的数据进行显示。而且上传也有问题,即使我点击的第一个组件进行上传,但显示却在最后一个组件上。
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
父组件 <view class="createtask"> <view class="cttitle">场站整体照片<text>*</text></view> <view class="desc">从不同方位拍摄拟建充电桩整体区域图,要求不少于2张</view> <mp-fileupload typename="imgStationFiles" fileList="{{formdata.imgStationFiles}}" bindsendMsg="sendMsg"></mp-fileupload> <view class="cttitle" style="margin-top:60rpx">现场整体(航拍或手绘)</view> <mp-fileupload typename="imgRiskFiles" fileList="{{formdata.imgRiskFiles}}" bindsendMsg="sendMsg"></mp-fileupload> <view class="cttitle" style="margin-top:60rpx">现场整体补充</view> <mp-fileupload typename="imgAcVideoFiles" fileList="{{formdata.imgAcVideoFiles}}" bindsendMsg="sendMsg"></mp-fileupload> </view> 子组件 <!--pages/components/fileUpload/fileUpload.wxml--> <view class="uploaderbox"> <van-uploader accept="media" max-count="20" multiple file-list="{{ fileList }}" bind:delete="deleteRead" bind:after-read="afterRead"> <view class="uploader"> <!-- <van-icon class="plus" name="plus" /> --> 点击上传 </view> </van-uploader> </view> // pages/components/fileUpload/fileUpload.js const Request = require("../../utils/request"); //导入模块 var that var successNum = 0 Component({ /** * 组件的属性列表 */ properties: { fileList: { type: Array, value: [], observer(nv, ov, path) { console.log(nv); } }, typename: { type: String, value: '', observer(nv, ov, path) { console.log(nv); } } }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { that = this }, hide: function () {}, resize: function () {}, }, /** * 组件的初始数据 */ data: { // fileList: [] }, /** * 组件的方法列表 */ methods: { afterRead(event) { const { file } = event.detail; for (let i = 0; i < file.length; i++) { if (file[i].duration && file[i].duration < 5) { wx.showToast({ title: '视频不能小于5秒', icon: "none", mask: true, }) return } } console.log(that.data.fileList); const fileList = that.data.fileList //获得这次上传的图片数量,上传时避免重复上传之前传过的文件 const thatNum = file.length const beforeNum = fileList.length const totalNum = thatNum + beforeNum //还没上传时将选择的图片的上传状态设置为加载 for (let j = 0; j < thatNum; j++) { file[j].status = 'uploading' fileList.push(file[j]) } that.setData({ fileList }) //上传服务器 for (let i = beforeNum; i < totalNum; i++) { that.uploadImg(i, that.data.fileList[i].url, that, thatNum) } }, uploadImg(fileListIndex, fileURL, that, thatNum) { //上传文件 const filePath = fileURL // 小程序临时文件路径 wx.uploadFile({ url: `${Request.apiHttp}/psp/api/ifs/upload`, filePath: filePath, name: 'dhefile', header: { 'dhetoken': wx.getStorageSync("UserSessionId"), }, formData: { appCode: 'icc' }, success(res) { successNum++ var tem = JSON.parse(res.data) // 上传完成需要更新 fileList that.setData({ [`fileList[${fileListIndex}].url`]: tem.data.httpUrl, [`fileList[${fileListIndex}].status`]: 'done', [`fileList[${fileListIndex}].id`]: tem.data.id }) console.log(that.data.typename); if (successNum === thatNum) { that.triggerEvent('sendMsg', { fileList: that.data.fileList, typename: that.data.typename }) } }, fail: function (res) { console.log("file upload fail") }, }) }, deleteRead(e) { let fileList_index = e.detail.index //fileList下标 that.data.fileList.splice(fileList_index, 1) that.setData({ fileList: that.data.fileList }) that.triggerEvent('sendMsg', { fileList: that.data.fileList, typename: that.data.typename }) }, } })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
https://developers.weixin.qq.com/s/1wuNDBmt7iNZ 能搞个能复现的最少代码吗
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
父组件 <view class="createtask"> <view class="cttitle">场站整体照片<text>*</text></view> <view class="desc">从不同方位拍摄拟建充电桩整体区域图,要求不少于2张</view> <mp-fileupload typename="imgStationFiles" fileList="{{formdata.imgStationFiles}}" bindsendMsg="sendMsg"></mp-fileupload> <view class="cttitle" style="margin-top:60rpx">现场整体(航拍或手绘)</view> <mp-fileupload typename="imgRiskFiles" fileList="{{formdata.imgRiskFiles}}" bindsendMsg="sendMsg"></mp-fileupload> <view class="cttitle" style="margin-top:60rpx">现场整体补充</view> <mp-fileupload typename="imgAcVideoFiles" fileList="{{formdata.imgAcVideoFiles}}" bindsendMsg="sendMsg"></mp-fileupload> </view> 子组件 <!--pages/components/fileUpload/fileUpload.wxml--> <view class="uploaderbox"> <van-uploader accept="media" max-count="20" multiple file-list="{{ fileList }}" bind:delete="deleteRead" bind:after-read="afterRead"> <view class="uploader"> <!-- <van-icon class="plus" name="plus" /> --> 点击上传 </view> </van-uploader> </view> // pages/components/fileUpload/fileUpload.js const Request = require("../../utils/request"); //导入模块 var that var successNum = 0 Component({ /** * 组件的属性列表 */ properties: { fileList: { type: Array, value: [], observer(nv, ov, path) { console.log(nv); } }, typename: { type: String, value: '', observer(nv, ov, path) { console.log(nv); } } }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { that = this }, hide: function () {}, resize: function () {}, }, /** * 组件的初始数据 */ data: { // fileList: [] }, /** * 组件的方法列表 */ methods: { afterRead(event) { const { file } = event.detail; for (let i = 0; i < file.length; i++) { if (file[i].duration && file[i].duration < 5) { wx.showToast({ title: '视频不能小于5秒', icon: "none", mask: true, }) return } } console.log(that.data.fileList); const fileList = that.data.fileList //获得这次上传的图片数量,上传时避免重复上传之前传过的文件 const thatNum = file.length const beforeNum = fileList.length const totalNum = thatNum + beforeNum //还没上传时将选择的图片的上传状态设置为加载 for (let j = 0; j < thatNum; j++) { file[j].status = 'uploading' fileList.push(file[j]) } that.setData({ fileList }) //上传服务器 for (let i = beforeNum; i < totalNum; i++) { that.uploadImg(i, that.data.fileList[i].url, that, thatNum) } }, uploadImg(fileListIndex, fileURL, that, thatNum) { //上传文件 const filePath = fileURL // 小程序临时文件路径 wx.uploadFile({ url: `${Request.apiHttp}/psp/api/ifs/upload`, filePath: filePath, name: 'dhefile', header: { 'dhetoken': wx.getStorageSync("UserSessionId"), }, formData: { appCode: 'icc' }, success(res) { successNum++ var tem = JSON.parse(res.data) // 上传完成需要更新 fileList that.setData({ [`fileList[${fileListIndex}].url`]: tem.data.httpUrl, [`fileList[${fileListIndex}].status`]: 'done', [`fileList[${fileListIndex}].id`]: tem.data.id }) console.log(that.data.typename); if (successNum === thatNum) { that.triggerEvent('sendMsg', { fileList: that.data.fileList, typename: that.data.typename }) } }, fail: function (res) { console.log("file upload fail") }, }) }, deleteRead(e) { let fileList_index = e.detail.index //fileList下标 that.data.fileList.splice(fileList_index, 1) that.setData({ fileList: that.data.fileList }) that.triggerEvent('sendMsg', { fileList: that.data.fileList, typename: that.data.typename }) }, } })
https://developers.weixin.qq.com/s/1wuNDBmt7iNZ 能搞个能复现的最少代码吗