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 iconSize" aria-hidden="true"   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: [Array],
	    default: ()=>['.jpg','.png','.gif','.zip','.rar','.docx','.doc']
	  },
	  //最大上传文件大小 Kb为单位，为0，则不限制上传文件大小
	  maxFileSize: {
	    type: Number,
	    default: 0
	  },
      //服务返回回调的图片数组--回填
      mode: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        imgList: [],
        showList: [],
        showControl: true,
		files:[],              //文件名列表 
		extensionNames:[],     //扩展名集合
		invaliadFiles:[]       //无效文件
		
      }
    },
    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:this.allowFileType,
          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=[];
			let invalidFiles=[];
			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(_this.allowFileType.length>0){
					//获取文件扩展名
					let index1 = item.name.lastIndexOf(".");
					let suffix = item.name.substr(index1);
					if(_this.allowFileType.indexOf(suffix)==-1){
						invalidFiles.push(item.name);
					}
				}
				 
			});
			//不允许的文件类型提示
			if(invalidFiles.length>0){
				//限制文件类型列表传入事件
				_this.$emit('limitFileTypeList',invalidFiles,_this.allowFileType);
				return;
			}
			else{
				//限制文件类型列表传入事件
				_this.$emit('limitFileTypeList',invalidFiles,_this.allowFileType);
			}
			//文件大小的限制提示
			if(greaterArr.length>0){				
				//限制文件大小列表传入事件
				_this.$emit('limitFileSizeList',greaterArr);
				return;
			}
			else{
				//限制文件大小列表传入事件
				_this.$emit('limitFileSizeList',greaterArr);
			}
            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) {
		  console.info("deleteImg",eq);
		  console.info("this.imgList",this.imgList);
		  console.info("this.files",this.files);
		  console.info("this.extensionNames",this.extensionNames);
        let deleteImg = this.imgList;
        deleteImg.splice(eq, 1); //删除临时路径
		this.files.splice(eq,1);
		this.extensionNames.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: 200rpx;
  }

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

  .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;
  }
  .font13{
	  font-size:12px;
	  
	  overflow: hidden;
  }
  .iconSize{
	  font-size:90px;
  }
</style>