uni-halo/tm-vuetify/components/tm-upload/tm-upload.vue

<template>
	<view class="tm-upload flex-start relative" id="tm-upload">
		<view v-for="(item,index) in list" :key="index" class="tm-upload-item  " :class="[grid!=1?'ma-4':'']" :style="{
			width:itemWidth+'px',
			height:itemHeight+'px'
		}">
			<view v-if="!disabled" class="tm-upload-del " :class="[delDirection]">
				<slot name="del">
					<tm-icons @click="del(index)" :black="black_tmeme" name="icon-times-circle-fill" size="36" color="red"></tm-icons>
				</slot>
			</view>
			<view @click.stop="$tm.preview(item.url,list,'url')" class="tm-upload-item-ck text flex-center  overflow" 
			:class="[color_tmeme,black_tmeme?'grey-darken-4 bk':'',`round-${round}`]">
				<slot name="img" :info={itemWidth,itemHeight}>
					<tm-icons style="line-height: 0;" name="icon-exclamationcircle-f" v-if="item['loaderror']==true"></tm-icons>
					<image :mode="model" v-else :src="item.url" @error="errorFile(item,index)" :style="{
						width:itemWidth+'px',
						height:itemHeight+'px'
					}"></image>
				</slot>
			</view>
			<!-- 上传提示语。 -->
			<view v-if="tips&&!disabled" class="tm-upload-tips text-size-xs round-b-2"
			 :class="[
				 item.statusCode==2||item.statusCode==4?'red text':'',
				 item.statusCode==1||item.statusCode==0?'black text':'',
				 item.statusCode==3?color_tmeme+' text':'',
				 black_tmeme?'bk':''
			 ]"
			 >{{item.status}}</view>
			<!-- 上传的进度。 -->
			<view v-if="item.progress>0&&item.progress!=100&&!disabled" class="tm-upload-pro green"
				:style="{width:item.progress+'%'}"></view>
			<!-- 上传的排序。 -->
			<view v-if="showSort" class="absolute  l-0 fulled flex-between" :class="[disabled?'b-0':'b-40']" :style="{height:'46rpx'}">
				<view @click.stop="prevSort(item,index,'prev')" class="round-r-24 flex-center px-16 py-6" :class="[index==0?'opacity-0':'']" style="background-color: rgba(0, 0, 0, 0.3);">
					<tm-icons name="icon-angle-left" size="24" :color="color_tmeme"></tm-icons>
				</view>
				<view @click.stop="prevSort(item,index,'next')" class="round-l-24 flex-center px-16 py-6" :class="[index==list.length-1?'opacity-0':'']" style="background-color: rgba(0, 0, 0, 0.3);">
					<tm-icons name="icon-angle-right" size="24" :color="color_tmeme"></tm-icons>
				</view>
			</view>
		</view>

		<view  @click="addfile" v-if="list.length<max&&!disabled" class="tm-upload-item  ma-4 grey-lighten-4 " :class="[`round-${round}`]" :style="{
			width:itemWidth+'px',
			height:itemHeight+'px'
		}">
			<view class="tm-upload-item-ck border-a-0 flex-center  text " :class="[color_tmeme,black_tmeme?'grey-darken-4 bk':'',`round-${round}`]">
				<slot name="upload">
					<tm-icons name="icon-plus" size="36" :color="color_tmeme"></tm-icons>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 上传图片组件
	 * @property {Function} change 每一张图片上传成功都传动触发，并返回上传成功的图片列表。
	 * @property {Function} del 删除一张图片时触发，返回当前删除的图片数据。
	 * @property {Number|String} grid = [1|2|3|4|5] 默认：5，一行排几个。
	 * @property {Number} code = [] 默认：0，服务器上传返回数据中表示成功的标志码。
	 * @property {Number} width = [] 默认：0，自定义组件宽度。如果0，自动获取。
	 * @property {Number|String} img-height = [0] 默认：0，宽高相等。单位upx,自定义图片高度。
	 * @property {Number|String} max = [9] 默认：9，最大上传数量
	 * @property {String} del-direction = [left|right|center] 默认：right， 删除按钮的方向。left,right,center
	 * @property {String|Boolean} disabled = [true|false] 默认：false， 如果禁用，会隐藏上传和删除按钮,只显示已上传的图片。
	 * @property {String} url = [] 默认：""，上传的地址。
	 * @property {Array} filelist = [] 默认：[]，默认上传显示的图片。如果加上filelist.sync的话，会自动更新数据实现双向绑定。类似于v-model;
	 * @property {String} url-key = [] 默认：""，返回数据时，如果返回的是对象。则需要提供对象图像地址的key。默认没有，返回的即是图片地址。
	 * @property {Object} header = [] 默认：{}，上传的头部参数。
	 * @property {String} file-name = [file] 默认：file，上传时的文件key名。
	 * @property {String} model = [scaleToFill|aspectFit|aspectFill|widthFix|heightFix|top|bottom|center|left|right|top left|top right|bottom left|bottom right] 默认：scaleToFill,图片展现模式，同官方。
	 * @property {String} name = [] 默认：''，提交表单时的的字段名称标识
	 * @property {Boolean|String} tips = [true|false] 默认：true，是否显示底部的上传提示语。上传中，失败等。
	 * @property {Boolean|String} black = [true|false] 默认：null，暗黑模式。
	 * @property {Boolean|String} auto-upload = [true|false] 默认：false，是否自动上传，即添加完图片后立即上传。
	 * @property {Number|String} round = [] 默认：3，圆角
	 * @property {Object} responseStu = [] 默认： {code:'code',//服务器返回的码的字段名称data:'data',//服务上传成功后返回 的数据字段名称msg:'msg'//服务器响应信息的字段名称。}，服务器响应结构字段映射表
	 * @property {Number|String} maxsize = [] 默认：10*1024*1024，最大上传的图片大小，10mb大小
	 * @example <tm-upload></tm-upload>
	 * @description 可以通过refs.组件获得：addfile主动触发添加文件，stopupload停止上传，startupload开始或者继续上传，del删除一张图片。
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmIcons},
		name: "tm-upload",
		props: {
			showSort:{
				type:Boolean|String,
				default:false
			},
			model:{
				type:String,
				default:'scaleToFill'
			},
			black:{
				type:Boolean|String,
				default:null
			},
			// 一行几个。
			grid: {
				type: String | Number,
				default: 5
			},
			// 默认0即为宽高相等。单位upx
			imgHeight: {
				type: String | Number,
				default: 0
			},
			// 最大上传数量，默认9
			max: {
				type: String | Number,
				default: 9
			},
			// 最大上传数量，默认9
			maxsize: {
				type: String | Number,
				default: 10*1024*1024
			},
			// 主题色
			color: {
				type: String,
				default: 'primary'
			},
			
			// 删除按钮的方向。left,right,center
			delDirection: {
				type: String,
				default: 'right'
			},
			// 如果禁用，会隐藏上传和删除按钮。
			disabled: String | Boolean,
			// 上传的地址。
			url: {
				type: String,
				default: ''
			},
			// 默认上传显示的图片。如果加上filelist.sync的话，会自动更新数据实现双向绑定。类似于v-model;
			filelist: {
				type: Array,
				default: () => {
					return [];
				}
			},
			
			//返回数据时，如果返回的是对象。则图像地址的key名。默认没有，返回的即是图片地址。
			urlKey:{
				type:String,
				default:''
			},
			// 上传的头部参数。
			header:{
				type:Object,
				default:()=>{
					return {};
				}
			},
			// 上传时的文件key名。默认file
			fileName:{
				type:String,
				default:'file'
			},
			// 是否显示底部的上传提示语。上传中，失败等。
			tips: {
				type: Boolean|String,
				default: true,
			},
			// 是否自动上传，即添加完图片后立即上传。
			autoUpload: {
				type: Boolean,
				default: false,
			},
			//提交表单时的的字段名称
			name:{
				type:String,
				default:''
			},
			round:{
				type:Number|String,
				default:3
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			},
			//定义上传成功返回的code码，默认是0表示上传成功 。
			code:{
				type:Number,
				default:0
			},
			width:{
				type:Number,
				default:0
			},
			//上成功后，服务器顺应数据的字段映射表。
			responseStu:{
				type:Object,
				default:()=>{
					return {
						code:'code',//服务器返回的码的字段名称
						data:'data',//服务上传成功后返回 的数据字段名称
						msg:'msg'//服务器响应信息的字段名称。
					}
				}
			}
		},
		computed: {
			header_obj:function () {
				return this.header;
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
		},
		data() {
			return {
				maxWidth: 0,
				itemWidth: 0,
				itemHeight: 0,
				list: [],
				
				upObje:null,
			};
		},
		created() {
			// #ifdef APP-VUE || APP-PLUS  || MP
			this.showSheet = false;
			// #endif
		},
		async mounted() {
			let t = this;
			if (typeof t.filelist === 'object' && Array.isArray(t.filelist)) {
				let plist = [...t.filelist];
				plist.forEach((item, index) => {
					let url = "";
					if (typeof item === 'string') {
						url = item;
					} else if (typeof item === 'object') {
						url = item[t.urlKey]
					}
					t.list.push({
						url: url,
						status: "上传成功",
						progress: 100,
						fileId: t.$tm.guid(),
						statusCode: 3,
						data: item,
					})
				})
			
			}
			this.getRect()
				

		},
		updated() {
			this.getRect()
		},
		methods: {
			prevSort(item,index,type){
				if((index==0&&type=='prev')||(index==this.list.length-1&&type=='next')){
					return;
				}
				let nowindex = type=='prev'?index-1:index+1
				let nowItem = this.list[index];
				let newnowItem = this.list[nowindex];
				let nowfilelist= [...this.list]
				nowfilelist.splice(index,1,newnowItem)
				nowfilelist.splice(nowindex,1,nowItem)
				this.list = [...nowfilelist]
				this.$emit('update:filelist', nowfilelist);
			},
			getRect(){
				let t = this;
				this.$Querey('.tm-upload', this,0).then(o=>{
						if(!o[0].width&&t.maxWidth) return;
						t.maxWidth = o[0].width||t.width;
						let itemWidth = (t.maxWidth - (parseInt(t.grid) - 1) * uni.upx2px(12)) / parseInt(t.grid);
						t.itemWidth = itemWidth;
						t.itemHeight = t.itemWidth;
						if (t.imgHeight > 0) {
							t.itemHeight = parseInt(uni.upx2px(t.imgHeight));
						}
					})
			},
			errorFile(item,index){
				let id = item;
				id['loaderror'] = true;
				this.list.splice(index,1,id)
			},
			//动态添加默认已上传的文件。
			pushFile(list){
				let t= this;
				let plist = list||[];
				plist.forEach((item, index) => {
					let url = "";
					if (typeof item === 'string') {
						url = item;
					} else if (typeof item === 'object') {
						url = item[t.urlKey]
					}
					t.list.push({
						url: url,
						status: "上传成功",
						progress: 100,
						fileId: t.$tm.guid(),
						statusCode: 3,
						data: item,
					})
				})
			},
			async addfile() {
				if(this.disabled) return;
				let t = this;
				let maxfile = parseInt(this.max) - this.list.length;
				if (maxfile <= 0) {
					this.$tm.toast("已达上传上限");
					return;
				};
				let url = this.url;
				if(!this.upObje){
					this.upObje = new this.$tm.upload.uploadfile({
						opts:{header:this.header_obj,name:this.fileName},
						maxfile:maxfile,
						uploadUrl:url,
						isAuto:this.autoUpload,
						maxsize:this.maxsize,
						code:this.code,
						responseStu:this.responseStu
					});
					// 添加已有的图片。
					this.upObje.addfile(this.list);
					this.upObje.success = function(item){
						t.changeSuccess();
					}
				}else{
					this.upObje.setConfig({maxsize:this.maxsize,maxfile:maxfile,code:this.code,responseStu:this.responseStu,opts:{header:this.header_obj,name:this.fileName}});
				}
				
				let clist = await this.upObje.chooesefile().catch(e=>{});
				if(clist){
					t.list = clist;
				}
			},
			// 停止下载
			stopupload(){
				if(this.disabled) return;
				if(this.upObje){
					this.upObje.stop();
				}
			},
			// 继续上传或者开始上传。
			startupload(){
				if(this.disabled) return;
				if(this.upObje){

					this.upObje.start();
				}
			},
			// 删除一张图片。
			del(index) {
				if(this.disabled) return;
				this.$emit("del",this.list[index])
				this.list.splice(index, 1);
				this.changeSuccess();
			},
			// 只有上传成功才会触发change。并更新发送数据。
			changeSuccess() {
				let filelist = [];
				this.list.forEach((item, index) => {
					if (item.statusCode === 3) {
						filelist.push(item.data);
					}
				})
				this.$emit('change', filelist);
				this.$emit('update:filelist', filelist);
			},
			//获取已经上传的图像。
			getFile(){
				let filelist = [];
				this.list.forEach((item, index) => {
					if (item.statusCode === 3) {
						filelist.push(item.data);
					}
				})
				return filelist;
			},
			//清除所有已上传的文件。
			clearAllFile(){
				if(this.disabled) return;
				this.$emit("clear",[])
				this.list=[];
				this.changeSuccess();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tm-upload {
		flex-flow: wrap;

		.tm-upload-item {
			position: relative;

			.tm-upload-tips {
				position: absolute;
				z-index: 10;
				left: 0;
				bottom: 0;
				height: 40upx;
				line-height: 40upx;
				text-align: center;
				font-size: 23upx;
				width: 100%;
			}

			.tm-upload-pro {
				position: absolute;
				z-index: 11;
				left: 0;
				bottom: 0;
				height: 6upx;
				width: 0%;
			}

			.tm-upload-del {
				position: absolute;
				z-index: 10;

				&.right {
					right: -6upx;
					top: -8upx;
				}

				&.left {
					left: -6upx;
					top: -8upx;
				}

				&.center {
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.tm-upload-item-ck {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>