uview を使用して、画像アップロード コンポーネントの完全なコードを uniapp にカプセル化します。

 yh-uploadimage.vue コンポーネント

<template>
	<view class="yh-uploadimage">
		<u-row gutter="10">
			<u-col v-if="!showUploadList" span="4" v-for="(item, index) in fileList">
				<view class="pre-item" :key="index">
					<image @tap="previewImage(index)" class="pre-item-image"
						:src="FormatDFSUrl(item.url)" mode="aspectFill"></image>
					<view class="del u-f-ac u-f-ajc" @click="removeFun(index)" v-if="!preview">
						<u-icon name="minus" size="26" color="white"></u-icon>
					</view>
				</view>
			</u-col>
			<u-col span="4" v-if="fileList&&fileList.length<limitNumber&&!preview">
				<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action" :max-count="limitNumber"
					@on-success="successFun">
					<view slot="addBtn" class="slot-btn u-f-ac u-f-ajc" hover-class="slot-btn__hover"
						hover-stay-time="150">
						<view>
							<u-icon name="camera-fill" size="60" color="#c0c4cc"></u-icon>
							<view class="placeholder" v-html="placeholderText"> </view>
						</view>
					</view>
				</u-upload>
			</u-col>

		</u-row>
		<view class="wrap u-f-ac u-f-wrap">


		</view>
		<!-- <u-upload :max-size="upload_size" :limitType="limitType " :file-list="fileList" :action="action"
			@on-success="successFun"></u-upload> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		BaseFastDFS,
		media_file_upload_url
	} from '@/common/api/auth.js'
	export default {
		name: "yh-uploadimage",
		data() {
			return {
				limitNumber:2,
				showUploadList: false,
				placeholderText: "请上传",
				action: "", //上传地址
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif'],
				upload_size: "10",
				currentCode: "", //文件服务器Code
				currentPath: "/upload", //文件存放目录
				fileList: [],
			}
		},
		props: {
			value: {
				type: String
			}, //传入的图片集合，多个之间用逗号分隔
			code: {
				type: String
			}, //文件服务器Code
			uploadpath: {
				type: String,
				default: '/upload'
			}, //文件存放目录
			filetypes: {
				type: Array
			}, //文件类型，多个逗号分隔
			limit: {
				type: Number,
				default: 2,
			}, //上传文件数量限制
			placeholder: {
				type: String,
			}, //单个文件大小限制，单位M
			size: {
				type: String,
				default: "10"
			}, //单个文件大小限制，单位M
			disabled: {
				type: Boolean,
				default: false
			}, //是否禁用
			preview: {
				type: Boolean,
				default: false,
			}, //是否预览（只读）
			single: {
				type: Boolean,
				default: false
			}, //是否单个图片，相当于limit=1，但是优先级大于limit
			uploadcallback: {
				type: Function
			}, //上传完成的回调
			fileRename: {
				type: String,
			}, //文件重命名
			category: {
				type: Number
			}, //上传文件分类（0=系统普通文件，1=特定的目录，2=超越code的上传）
		},
		created() {
			this.initFun();
		},
		onPullDownRefresh() {},
		watch:{
			value() {
				this.uploadInit()
			},
			fileList(){
				let res=""
				if(this.fileList&&this.fileList.length){
					this.fileList.map(el=>{
						res+=el.url+","
					})
					res = res.substring(0, res.length - 1)
				}
				this.$emit("input", res);
			},
		},
		methods: {
			successFun(data, index, lists) {
				this.fileList.push({
					url: data.response.path
				})
				/* console.log(data)
				console.log(index)
				console.log(lists) */
			}, //上传成功
			uploadInit(){
				if (this.value) {
					let curFilePathList = this.value.split(",");
					if (curFilePathList) {
						let fileListArr=[];
						for (let i = 0; i < curFilePathList.length; i++) {
							let item = curFilePathList[i];
							fileListArr.push({
								url: item,
							});
						}
						this.fileList = fileListArr;
					}
				} else {
					this.fileList = [];
				}
				
			},
			initFun() {
				this.uploadInit();
				if (this.limit) {
					this.limitNumber = this.limit;
				}
				if (this.size) {
					this.upload_size = this.size * 1024 * 1024;
				}
				if (this.placeholder) {
					this.placeholderText = this.placeholder;
				}
				if (this.filetypes) {
					this.limitType = this.filetypes;
				}
				if (this.code) {
					this.currentCode = this.code;
				} else {
					this.$message({
						message: "[图片上传]未传入系统Code",
						type: "error"
					});
					return;
				}
				if (this.uploadpath) {
					this.currentPath = this.uploadpath;
				}
				let $fileReName = '';
				if (this.fileRename)
					$fileReName = `&fileRename=${this.fileRename}`;
				this.action =
					`${media_file_upload_url}?code=${this.currentCode}&path=${this.currentPath}&category=${this.category}${$fileReName}`;
			},
			removeFun(index){
				this.fileList.splice(index,1);
				this.$refs.uUpload.remove(index)
			},
			previewImage(index) {
				var imgArr = [];
				this.fileList.map(el=>{
					imgArr.push(this.FormatDFSUrl(el.url) );
				})
				//预览图片
				uni.previewImage({
					loop:true,
					indicator:"default",
					current:index,
					urls: imgArr
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-upload{
		    height: 180rpx;
		    overflow: hidden;
			width: 100%;
			    margin-top: -12rpx;
	}
	/deep/ .u-upload>uni-view{
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.slot-btn {
		height: 180rpx;
		background: rgb(244, 245, 246);
		.placeholder{
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #CCCCCC;
		}
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		height: 180rpx;
		position: relative;
		margin-bottom: 10rpx;
	}

	.pre-item-image {
		width: 100%;
		height: 100%;
	}
	.del{
		      position: absolute;
		      top: -8rpx;
		      left: z;
		      right: -10rpx;
		      z-index: 11;
		      background: red;
		      width: 32rpx;
		      height: 32rpx;
		      border-radius: 50%;
		      text-align: center;
	}
</style>

main.js グローバル登録:

import yhUploadimage from '@/components/upload/yh-uploadimage.vue'
Vue.component("yh-uploadimage", yhUploadimage);

使用：

<yh-uploadimage code="zsbm" placeholder="クーポンをアップロードしてください</br> (最大 4 つ)" :limit="4" v-model="formData.pic"></yh-uploadimage>