一 父组件

<template>  <view>    <upload-img></upload-img>  </view></template><script>import UploadImg from "./components/upload-img.vue"export default{components:{UploadImg},}</script>

二 子组件<template>  <view>    <view class="upload">      <block v-for="(upload,index) in uploads" :key="index" >        <view class="uplode-file" >        <image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage" ></image>        <image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>        </view>      </block>      <view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">        <view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>        <image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>      </view>    </view>	  </view></template><script>export default{props: {  types: {    type: String,      default: 'image' }, dataList: {   type: Array,     default: function() {       return []     } },      // 清除图标,即❌ clearIcon: {   type: String,     default: ';  },  uploadIcon: {    type: String,      default: ''  }, deleteUrl: {   type: String,     default: '' },   // 上传图片数量，默认最多6个   uploadCount: {     type: Number,       default: 6   },     //上传图片大小 默认5M     upload_max: {       type: Number,         default: 5     },       autoUpload: {         type: Boolean,           default: true       }},  data(){    return {      //上传的图片地址      uploadImages: [],      //展示的图片地址      uploads: [],      // 超出限制数组      exceeded_list: [],      uploadUrl:"",      images:""    }  }, watch:{    dataList:{      handler(val){        this.uploads = val;      },        immediate: true    } },   created(){     //上传的服务器的地址     this.uploadUrl = this.$base.baseUrl + '/uploads'    },     mounted(){       // 每次进到这个页面的时候先把缓存的images删除掉       uni.removeStorageSync('images');     },       methods:{         // 预览图片         previewImage (e) {           var current = e.target.dataset.src           uni.previewImage({             current: current,             urls: this.dataList           })         },           // 选择图片并自动上传到服务器           chooseUploads(){             switch (this.types){               case 'image':                  //选择图片                 uni.chooseImage({                   //count是当前可以选择的图片张数，uploadCount是设置一共可以选择的图片张数；uploads.length是已经上传的张数                   count: this.uploadCount - this.uploads.length,                    //可以指定是原图还是压缩图，默认二者都有                   sizeType: ['original', 'compressed'],                    // album 从相册选图，camera 使用相机，默认二者都有。                   sourceType: ['album', 'camera'],                    success: (res) => {                     for(let i = 0; i< res.tempFiles.length; i++){                       if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){                         // res.tempFiles[i].path是一个blob对象，代表的是图片的地址                         // uploads数组代表的是blob对象形成的数组,用来在页面中展示                         this.uploads.push(res.tempFiles[i].path)                         if(this.autoUpload){//autoUpload为true则自动上传到服务器，走进uploadFile函数                           this.uploadFile(res.tempFiles[i].path)                         }else{                           this.uploadImages.push(res.tempFiles[i].path);                         }                       }else {                         this.exceeded_list.push(i === 0 ? 1 : i + 1);                         uni.showModal({                           title: '提示',                           content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`                         });                       }                     }                   },                 });                 break;             }           },             // 上传图片到服务器，服务器返回一个地址             uploadFile(path){               // 上传图片到服务器               uni.uploadFile({                 url: this.uploadUrl, //图片上传的服务器地址                 filePath: path,//选择图片后生成的blob对象                 name: 'file',//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容，一般值就是file                 success(uploadFileRes){                   // 获取目前images在缓存中的值                   const value = uni.getStorageSync('images')                   // resUrl是图片在服务器端的地址                   const resUrl = JSON.parse(uploadFileRes.data).data.url                   //将新上传的图片地址添加到总体的图片地址中，用逗号隔开                   if(value == ""){                     uni.setStorageSync('images', resUrl);                   }else{                     const imagesUrl = value + "" + "," + "" + resUrl                     uni.setStorageSync('images', imagesUrl);                   }                 },                 fail(){                   console.log("upload fail")                 }               });             },               delImage(index){                 //第一个是判断app或者h5的 第二个是判断小程序的                 if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == ';){                   this.uploads.splice(index,1)//删除该项，该项目就不在页面中显示了                   const imgString = uni.getStorageSync("images")                   const transArray = imgString.split(",")//拿到缓存中的图片信息并转换为数组                   // 将缓存中的对应url也删除掉                   if(transArray.length==1){                     uni.removeStorageSync("images")                   }                   if(transArray.length!=1){                     transArray.splice(index,index+1)                     const img = transArray.join(",")                     uni.setStorageSync('images', img);                   }                   return;                 };                 if(!this.deleteUrl) {                   uni.showModal({                     content: 'input delete interface'                   });                   return;                 };                 uni.request({                   url: this.deleteUrl,                   method: 'DELETE',                   data: {                     image: this.dataList[index]                   },                   success: res => {                     if(res.data.status == 1) {                       uni.showToast({                         title: 'delete success'                       })                       this.uploads.splice(index,1)                     }                   },                 });               },          }}</script><style scoped>	.upload {		display: flex;		flex-direction: row;		flex-wrap: wrap;	}	.uplode-file {		margin: 10upx;		width: 180upx;		height: 180upx;		position: relative;	}	.uploade-img {		display: block;		width: 180upx;		height: 180upx;	}	.clear-one{		position: absolute;		top: -10rpx;		right: 0;	}	.clear-one-icon{		position: absolute;		width: 20px;		height: 20px;		top: 0;		right: 0;		z-index: 9;	}	.uploader-input-box {		position: relative;		margin:10upx;		width: 208upx;		height: 208upx;		border: 2upx solid #D9D9D9;	}	.uploader-input-box:before,	.uploader-input-box:after {		content: " ";		position: absolute;		top: 50%;		left: 50%;		-webkit-transform: translate(-50%, -50%);		transform: translate(-50%, -50%);		background-color: #D9D9D9;	}	.uploader-input-box:before {		width: 4upx;		height: 79upx;	}	.uploader-input-box:after {		width: 79upx;		height: 4upx;	}	.uploader-input-box:active {		border-color: #999999;	}	.uploader-input-box:active:before,	.uploader-input-box:active:after {		background-color: #999999;	}	.uploader-input {		position: absolute;		z-index: 1;		top: 0;		left: 0;		width: 100%;		height: 100%;		opacity: 0;	}	.uploader-icon{		position: relative;		margin:10upx;		width: 208upx;		height: 208upx;	}	.uploader-icon .image-cion{		width: 100%;		height: 100%;	}</style>