palletApp/components/UploadheadFile.vue

<template>
	<view>
		<u-upload ref="uUpload" upload-text='' :width="width" :height='height' :max-size="45 * 1024 * 1024"  :custom-btn="true" :disabled="false"
			@on-success="success" :before-remove="beforeremove" :before-upload="handleBeforeUpload"
			:deletable="deletable" :source-type="sourceType" :show-progress="false"
			:action="action" :header="{ token: `${token}` }" :max-count="count" >
			<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				<image class="img" src="../static/images/hedit.png" mode="aspectFill"></image>
			</view> 
		</u-upload>
	</view>
</template>

<script>
	export default {
		name: "UploadFile",
		props: {
			fileidList:{},
			width:0, 
			height:0,
			count:{ default:1},
			edit: require("@/static/images/hedit.png"),
			sourceType: {
				type: Array,
				default() {
					return ['album', 'camera'];
				}
		    },
			deletable:false
		},
		data() {
			return {
				ifinit:false,
				fileId: [],
				file: [],
				propId: [],
				action:'',
				imgurl:"http://218.24.131.92:18080",// "https://xzapp.runpengsoft.com",
				token: uni.getStorageSync("token")
			}
		},
		computed: {
			fileList() {
				var fileList = [];
				if(this._props.fileidList && this._props.fileidList.length>0 && !this.ifinit){
					this.ifinit=true;
					this._props.fileidList.map(item => {
						this.fileId.push(item);
						fileList.push({
							url:  this.imgurl+'/images/'+item
						})
					});
				}
				return fileList;
			}
		},
		mounted() {
			this.action=this.imgurl+'/api/uploadRyzp';
			console.log(this.sourceType);
		},
		methods: {
			handleBeforeUpload(file) {},
			beforeremove(index) {
				return new Promise((resolve, reject) => {
					
					this.fileId.splice(index, 1);
					this.$emit('picIds', this.fileId);
					resolve();
					
					// 调后端接口删除操作
					// this.$u.api.removeFile(this.fileId[index]).then(res => {
					// 	this.fileId.splice(index, 1)
					// 	this.$emit('picIds', this.fileId)
					// 	// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
					// 	resolve();
					// }).catch(err => {
					// 	// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
					// 	reject();
					// })
					
				})
			},
			success(file, val) {
				var _this=this;
				if(file.success&&file.data)
				{
					// console.log('file',file.data)
					// file.data.forEach(item=>{
					// 	if(!_this.fileId.includes(item)){
					// 		_this.fileId.push(item);
					// 	}
					// });
					// console.log( _this.fileId)
					_this.fileId.push(file.data);
					// console.log("success");
					_this.$emit("picIds", _this.fileId);
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
.slot-btn{ 
	width: 36rpx;
	height: 36rpx;
}
.img{
	width: 36rpx;
	height: 36rpx;
}
</style>