低代码第二篇 组件封装【表单组件】 图片上传组件

  输入框属性

序号	属性值	默认值	描述
1	title	文本	字段标题
2	canedit	true	该表单是否可编辑，默认为true，即可编辑
3	defvalue	“”	字段默认值，默认为空
4	isshow	true	该字段可见性，默认为可见

页面代码

<wxs module="selectutil" src="selectutil.wxs"></wxs>
<view class="cu-bar bg-white margin-top ">
        <view class="action">
            {{formitem.title}}
        </view>
        <view class="action">
            {{selectutil.getimageslength(formitem.defvalue)}}/{{maxCount}}
        </view>
    </view>
    <view class="cu-form-group margin-bottom">
        <view class="grid col-4 grid-square flex-sub">
      <view class="bg-img" wx:for="{{selectutil.getImagedatas(formitem.defvalue,baseurl)}}"
       wx:key="index" bindtap="ViewImage" data-rurl="{{item.realurl}}">
                <image src='{{item.realurl}}' mode='aspectFill'></image>
        <view class="cu-tag bg-red" catchtap="DelImg" data-suburl="{{item.suburl}}">
                    <text class="cuIcon-close"></text>
                </view>
            </view>
            <view class="solids" bindtap="ChooseImage" wx:if="{{selectutil.showImageAdd(formitem.defvalue,maxCount,formitem.canedit)}}">
                <text class="cuIcon-cameraadd"></text>
            </view>
        </view>
    </view>

js代码

// component/wxe/imageupload.js
const IMG_BASEURL='https://wxeshop.oss-cn-chengdu.aliyuncs.com/';
const MAX_COUNT=2;//最大数量
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    formitem: {
      type: Object,
      value: {fieldname:'',title:'图片',defvalue:null,canedit:false,maxlength:4,
      serverurl:"/commenupload",
      baseurl:'https://地址/'
    }
    }
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    baseurl:IMG_BASEURL,
    maxCount:MAX_COUNT
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    //获取已上传图片数量
    getImageslength:function(){
      if(this.data.formitem.defvalue!=null&&this.data.formitem.defvalue!=undefined&&this.data.formitem.defvalue!=""){
        var arr=this.data.formitem.defvalue.split(",");
        return arr.length;
      }else{
        return 0;
      }
    },
    ChooseImage:function(e){
      //1.检测图片是否到达最大上传数量
     var count= this.getImageslength();
     if(count>=this.data.formitem.maxlength){
       wx.showToast({
         title: '超出允许上传的图片数量',
         icon:'none'
       });
     }else{
        //2. 选择图片
          wx.chooseImage({
            count: 1, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera','album'], //从相册选择
            success: (res) => {
              var path=res.tempFilePaths;
              console.log("path:", path,"baseurl:",this.data.baseurl);
              var surl= this.data.formitem.serverurl||'https://地址/upload';
              console.log("surl",surl);
              wx.uploadFile({
                url: surl,
                filePath: path[0],
                header:{
                  'openid': wx.getStorageSync('userinfo').openid
                },
                name: 'file',
                success:(loadres)=>{
                  console.log("loadres:",loadres.data);
                  //resolved(JSON.parse(loadres.data));
                  var result=JSON.parse(loadres.data);
                
 
                  if(result.success){
                    let oldval_=this.data.formitem.defvalue;
                    let newval_=result.obj;
                    if(oldval_!=null&&oldval_!=""){
                      oldval_= oldval_ + (newval_ ?","+ newval_:'');
                    }else{
                      oldval_= newval_ ? newval_ : '';
                    }
                    this.setData({
                      ["formitem.defvalue"]:oldval_
                    });
                    console.log("defvalue:",this.data.formitem.defvalue);
                    var parma={};
                  parma.defvalue=oldval_;
                  parma.fieldname=this.data.formitem.fieldname
                  parma.deftext=null;
                  this.triggerEvent("itemchange", parma, {})
                  }else{
                    wx.showToast({
                      title: '操作失败'+result.msg,
                      icon:'none'
                    })
                  }
                },
                complete(res) {
                  console.log(res)
                },
                fail:(erro)=>{
                  console.log(erro);
                  //rejected(erro);
                }
              });
            },
          });
     }
      
 
    },
    ViewImage(e) {
      wx.previewImage({
        urls: [e.currentTarget.dataset.rurl],
        current: e.currentTarget.dataset.rurl
      });
    },
    DelImg(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除图片吗？',
        cancelText: '取消',
        confirmText: '删除',
        success: res => {
          if (res.confirm) {
            var defvalue_=this.data.formitem.defvalue;
            var arr=defvalue_.split(",");
            var curl=e.currentTarget.dataset.suburl;
            if(arr.indexOf(curl)!=-1){
              var ind_=arr.indexOf(curl);
              console.log("ind_:",ind_);
              arr.splice(ind_, 1);
            }
            var parma={};
            parma.defvalue=arr.join(",");
            parma.fieldname=this.data.formitem.fieldname
            parma.deftext=null;
            this.triggerEvent("itemchange", parma, {})
          }
        }
      })
    },
  }
})

css代码

/* component/wxe/MultiText.wxss */
@import "/colorui/main.wxss";
@import "/colorui/icon.wxss";
.border-top{
  border-top: 1rpx solid #eee;
}