收藏
回答

多个上传组件,分别回显图片的问题?

我封装了一上传组件,在页面上引用组件后,分别进行传值。但显示有问题,并没有按传值的数据进行显示。而且上传也有问题,即使我点击的第一个组件进行上传,但显示却在最后一个组件上。

回答关注问题邀请回答
收藏

2 个回答

  • lmblm
    lmblm
    2023-12-21
    父组件
    <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="cttitlestyle="margin-top:60rpx">现场整体(航拍或手绘)</view>
        <mp-fileupload typename="imgRiskFiles" fileList="{{formdata.imgRiskFiles}}" bindsendMsg="sendMsg"></mp-fileupload>
    
    
        <view class="cttitlestyle="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="plusname="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
                })
            },
        }
    })
    
    2023-12-21
    有用
    回复
  • Mr.Zhao
    Mr.Zhao
    2023-12-20

    https://developers.weixin.qq.com/s/1wuNDBmt7iNZ 能搞个能复现的最少代码吗

    2023-12-20
    有用
    回复 10
    • lmblm
      lmblm
      2023-12-21
      我发在评论里了。
      2023-12-21
      回复
    • Mr.Zhao
      Mr.Zhao
      2023-12-21回复lmblm
      整个能直接运行的代码片段
      2023-12-21
      回复
    • lmblm
      lmblm
      2023-12-21
      发不了,我片段里引了UI库,超过1MB了。能加你问微信吗
      2023-12-21
      回复
    • Mr.Zhao
      Mr.Zhao
      2023-12-21回复lmblm
      没用的代码去掉不就行了  最少的代码复现问题,不是让你全加进去
      2023-12-21
      回复
    • lmblm
      lmblm
      2023-12-21
      https://developers.weixin.qq.com/s/0UtUnCmi7wNJ
      2023-12-21
      回复
    查看更多(5)
登录 后发表内容