YZProjectCloud/yanzhu-ui-app/miniprogram/pages/components/file-uploader/index.js

// components/filling/index.js
const app = getApp();
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        limit:{
            type:Number,
            value:5
        },
        fileUrlArray:{
            type:Array
        },
        iconClass:{
            type:String,
            value:"in-add-click"
        }
    },

    /**数据监听 */
    observers: {
        fileUrlArray:function(val){
            let lm = this.data.limit;
            let showUpload=false;
            if(val && val.length<lm){
                showUpload=true;
            }
            this.setData({
                uploaderList:val,
                showUpload:showUpload
            })
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        quantity:5,
        uploaderList: [],
        uploaderNum:0,
        showUpload:true
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 删除图片
        clearImg:function(e){
            var nowList = [];//新数据
            var uploaderList = this.data.uploaderList;//原数据
            
            for (let i = 0; i < uploaderList.length;i++){
                if (i == e.currentTarget.dataset.index){
                    continue;
                }else{
                    nowList.push(uploaderList[i])
                }
            }
            this.setData({
                uploaderNum: this.data.uploaderNum - 1,
                uploaderList: nowList,
                showUpload: true
            })
            console.log(this.data.uploaderList)
            this.triggerEvent("images", this.data.uploaderList); 
        },
        //展示图片
        showImg:function(e){
            var that=this;
            wx.previewImage({
                urls: that.data.uploaderList,
                current: that.data.uploaderList[e.currentTarget.dataset.index]
            })
        },
        //上传图片
        upload: function(e) {
            if(this.data.limit){
                this.data.quantity=this.data.limit;
            }
            var that = this;
            wx.chooseImage({
                count: that.data.quantity - that.data.uploaderNum, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    let tempFilePaths = res.tempFilePaths;
                    let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                    if (uploaderList.length==that.data.quantity){
                        that.setData({
                            showUpload:false
                        })
                    }
                    that.setData({
                        uploaderList: uploaderList,
                        uploaderNum: uploaderList.length,
                    })
                    that.triggerEvent("images", that.data.uploaderList); 
                }
            })
        },
    }
})