mes_mobile/components/upload/uploadImg.vue

<template>
	<view class="uploadImgView">
		<view class="uploadTitle" v-if="name && name!=''">
			<view class="name font_bold">{{name}}</view>
			<view class="limit">{{newList.length}}/{{limit}}</view>
		</view>
		<view class="imgList">
			<view class="uploadFlex itemBox" v-for="(item,index) in newList" :key="index">
				<view class="imgItem">
					<view class="itemImg">
						<image class="img" :src="item" mode="scaleToFill"></image>
					</view>
					<view class="deleteBox" @click="deleteImg(index)">
						<text class="icon iconfont icon-a-shanchu21"></text>
					</view>
				</view>
			</view>
			<view class="uploadFlex itemBox" v-for="(item,index) in uploadList" :key="index">
				<view class="imgItem">
					<view class="itemImg">
						<image class="img" :src="item.path" mode="scaleToFill"></image>
					</view>
					<view class="progressView">
						<view class="progressWidth" :style="'width:'+item.progress+'%'"></view>
					</view>
				</view>
			</view>
			<view class="uploadBut itemBox" @click="upload()" v-if="newList.length<limit">
				<view class="img_but">
					<view class="icon iconfont icon-a-shangchuanzhaopian2 font35"></view>
					<view class="text font12">
						上传图片
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				newList:this.list,
				uploadList:[],
				
				oss:{},
			}
		},
		props:{
			name:{
				type:[String],
				default:''
			},
			limit:{
				type:[Number,String],
				default:1
			},
			list:{
				type:[Array,Object],
				default: () => []
			},
		},
		watch:{
			list:{
				handler(val){
					this.newList = val;
				},
				immediate:true,
				deep:true
			}
		},
		mounted() {
			this.getOss();
		},
		onShow() {
			
		},
		methods:{
			// 获取图片oss 服务地址
			getOss(){
				this.$api.getOss('/oss.sign',{dir:'mes'}).then(res=>{
					this.oss = res.data;
				}).catch(err=>{})
			},
			deleteImg(num){
				this.newList.forEach((item,index)=>{
					if(num == index){
						this.newList.splice(index,1);
					}
				})
				this.$emit('input',this.newList);
			},
			upload(){
				uni.chooseImage({
					count:9,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach((item,index)=>{
							let num = item.length;
							let nameStr = item.toString();
							let name = Date.parse(new Date())+'/'+nameStr.substring(nameStr-8);
							let fileName = this.oss.dir+'/'+ name;
							let text = Date.parse(new Date())+'_'+index;
							
							let obj = {
								path:nameStr,
								text:text,
								progress:0,
							}
							this.uploadList.push(obj)
							
							this.uploadOss(item,name,fileName,text);
						})
				    },
					fail:(errUpload)=> {
						
					}
				});
			},
			uploadOss(url,name,fileName,text){
				const uploadTask = uni.uploadFile({
					url:this.oss.host,
					header:{
						'Content-Type':'application/x-www-form-urlencoded',
					},
				    filePath: url,
				    name: 'file',
				    formData: {
						'name':name,
				        'key': fileName,   
						'policy': this.oss.policy,
						'OSSAccessKeyId': this.oss.accessid,
						'success_action_status':200,
						'Signature': this.oss.signature,
				    },
				    success: (uploadFileRes)=>{
						this.newList.push(this.oss.host+fileName);
						this.uploadList = [];
						this.$emit('input',this.newList);
				    },
					fail:(err)=>{
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.uploadList.forEach((item,index)=>{
						if(item.text == text){
							item.progress = res.progress;
						}
					})
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.uploadTitle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;
		.limit{
			color: $uni-text-color-info;
		}
	}
	.imgList{
		height: 100%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.uploadFlex{
			display: flex;
		}
		.itemBox{
			width: 32%;
			height: 100px;
			margin-right: 2%;
			padding: 7px 0 0 0;
			box-sizing: border-box;
			.imgItem{
				width: 100%;
				height: 100%;
				position: relative;
				.itemImg{
					width: 100%;
					height: 100%;
				}
				.img{
					width: 100%;
					height: 100%;
					border-radius: 4px;
				}
				.deleteBox{
					position: absolute;
					top: 3px;
					right: 3px;
					z-index: 20;
					width: 26px;
					height: 26px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $uni-bg-color-delete;
					.icon{font-size: 14px;}
				}
			}
		}
		.itemBox:nth-child(3n){
			margin-right: 0;
		}
		.uploadBut{
			height: 93px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: $uni-bg-color-placeholder;
			border-radius: 4px;
			margin: 7px 0 0 0;
			padding: 0;
			box-sizing: border-box;
		}
	}
	
	.img_but{
		display: flex;flex-direction: column;align-items: center;
		.icon{color: $uni-text-color-inverse;}
		.text{margin-top: 5px;}
	}
	
	.progressView{
		position: absolute;bottom: 0;left: 0;z-index: 2;
		width: 100%;height: 6px;background: $uni-bg-color-placeholder;border-radius: 8px;
		.progressWidth{
			height: 6px;background: $uni-color-primary;
			border-radius: 8px;
		}
	}
</style>