dccloud/uni-app-front/components/g-upfile/g-upfile.vue

<template>
  <view class="imglistbx">
    <view :class="['imglistItem',columnNum==3?'column3':'column4']" v-for="(item,index) in showList" :key='index' style="justify-content: center;text-align: center;">
      <image :src="item" class="itemImg" @click="previewImage(index)" mode="aspectFill" v-if="extensionNames[index]=='.jpg'||extensionNames[index]=='.gif'||extensionNames[index]=='.png'" ></image>
	  <i class="fa fa-file-archive-o" aria-hidden="true" style="font-size:120px;" mode="aspectFill" v-else></i>
	  <view class="font13" >{{files[index].name}}</view>
      <icon size="18" type="cancel" class="cancelBtn" @click="deleteImg(index)" v-if="deleteBtn"></icon>
    </view>
    <!-- 上传控件 -->
    <view :class="['imglistItem',columnNum==3?'column3':'column4']" @click="uploadImg" v-if="control&&showControl">
      <view class="itemImg uploadControl">+</view>
    </view>
    <view class="clear"></view>
  </view>
</template>

<script>
  export default {
    props: {
      //是否显示上传控件
      control: {
        type: Boolean,
        default: true
      },
      //是否显示上删除按钮
      deleteBtn: {
        type: Boolean,
        default: true
      },
      //行数量 
      columnNum: {
        type: [Number, String],
        default: 4
      },
      //上传最大数量
      maxCount: {
        type: Number,
        default: 4
      },
	  // //允许上传文件类型
	  // allowFileType: {
	  //   type: [],
	  //   default: []
	  // },
	  //最大上传文件大小 Kb为单位，为0，则不限制上传文件大小
	  maxFileSize: {
	    type: Number,
	    default: 0
	  },
      //服务返回回调的图片数组--回填
      mode: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        imgList: [],
        showList: [],
        showControl: true,
		files:[],
		extensionNames:[]
		
      }
    },
    watch: {
      mode(v) {
        this.init(v)
      },
      showList(){
        if (this.showList.length >= this.maxCount) {
          this.showControl = false
          return
        };
         this.showControl = true;
      }
    },
    created() {
      this.init(this.mode)
    },
    methods: {
      init(v) {
        if (this.mode.length != 0) {
          this.showList = v;
          return
        };
        this.showList = this.imgList;
      },
      // 上传图片
      uploadImg() {
		  //console.info('chooseFiel',uni.chooseFile);
        uni.chooseFile({          
          count: this.maxCount,
		  extension:['.jpg','.png','.gif','.zip','.rar','.docx','.doc'],
          success: (chooseImageRes) => {
			  let _this=this;
			  console.info('chooseImageRes:',chooseImageRes);
            let tempFilePaths = chooseImageRes.tempFilePaths;
			let tempFiles=chooseImageRes.tempFiles;
			// console.info('upload start');
			// console.info('tempFilePaths',tempFilePaths);
			// console.info('tempFiles',tempFiles);
			let greaterArr=[];
			tempFiles.forEach((item,index)=>{ 
				if(_this.maxFileSize!=0){
					if((item.size/1024)>_this.maxFileSize){
						//console.info('item.name',item.name);
						greaterArr.push(item.name);
						 
					}
				}
				 
			});
			if(greaterArr.length>0){
				uni.showModal({
					title:'warning',
					content:'file:'+greaterArr.join()+' size greater than '+_this.maxFileSize+' kb',
					success:function(res){
						
					}
				});
				return;
			}
            tempFilePaths=tempFilePaths.slice(0,this.maxCount-this.showList.length);
			tempFiles.forEach((item,index)=>{
				_this.files.push(item);	
				//console.info('文件大小',item.size);
				//获取文件扩展名			
				let index1 = item.name.lastIndexOf(".");
				let suffix = item.name.substr(index1);
				//console.info('suffix',suffix);
				this.extensionNames.push(suffix);
			});
			
			
			//return;
			// console.info('pop window end');
			// console.info('tempFilePaths',tempFilePaths);
			// console.info('tempFiles',tempFiles);
            tempFilePaths.forEach((item) => {
              this.imgList.push(item);
            });
            this.$emit("chooseFile", this.imgList, tempFilePaths)
          }
        });
      },
      //删除图片
      deleteImg(eq) {
        let deleteImg = this.imgList;
        deleteImg.splice(eq, 1); //删除临时路径
        if (this.mode.length > 0) {
          let deleteImg = this.showList;
          deleteImg.splice(eq, 1); //删除服务那边的路径
        }
        this.$emit("imgDelete", this.handleImg(), eq)
      },
      // 预览图片
      previewImage(eq) {
        let getUrl = this.handleImg();
        uni.previewImage({
          current: getUrl[eq],
          urls: getUrl
        })
      },
      //返回需要操作的图片数组
      //如果是回调了则操作回填后的数组 否则操作临时路径的图片数组
      handleImg() {
        return this.mode.length > 0 ? this.showList : this.imgList
      },
    }
  }
</script>

<style scoped>
  /* 上传  str */
  .imglistbx {
    width: 100%;
    height: 100%;
  }

  .imglistItem {
    position: relative;
    float: left;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }

  .column3 {
    width: 33.3333%;
    height: 160rpx;
  }

  .column4 {
    width: 25%;
    height: 130rpx;
  }

  .itemImg {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 10rpx;
  }

  .cancelBtn {
    position: absolute;
    top: -10rpx;
    right: 10rpx;
  }

  /* 上传控件 */
  .uploadControl {
    font-size: 50rpx;
    color: #888;
    background-color: #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*  上传  str end*/
  .clear {
    clear: both;
  }
</style>