上传组件使用

图片上传

单图上传

示例:

<template>
	<UploadSinglePicture 
	:upload-data="{type:null, use_type:20, file_type: '', save_path: 'picture'}"
	type="image"
	show-content="轮播图片"
	:is-show-button="true"
	v-model:upload-picture-uid="createForm.album_picture_uid"
	v-model:upload-picture-url="uploadPicutreUrl"
	/>
</template>
<script setup lang="ts">
//公共组件
import UploadSinglePicture from "@/pages/laravel-fast-api/v1/components/element/Upload/UploadPicture/UplaodSinglePicture.vue"

//上传图片回显
const uploadPicutreUrl = ref("");
</script>

结合表单实现图片回显

示例:

<template>
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form-item label="银行卡正面" prop="is_default">
            <UplaodSinglePicture
              v-model:upload-picture-uid="createForm.card_front_picture_uid"
              v-model:upload-picture-url="uploadPicutreBankFrontUrl"
              :upload-data="{ type: null, use_type: 20, file_type: '', save_path: 'picture' }"
              type="image"
              show-content="正面照片"
              :is-show-button="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="uploadPicutreBankFrontUrl" type="flex" justify="center">
        <el-col :span="24">
          <el-image style="width: 200px" :src="uploadPicutreBankFrontUrl"></el-image>
        </el-col>
      </el-row>
</template>

多图上传

示例:

<template>
	<el-row type="flex">
		<el-col :span="20">
			<el-form-item label="商品主图" prop="goods_main_picture_uid_array" >
				<el-button type="primary" plain @click="handleToAddMainPicture()">添加商品主图</el-button>
				<UploadMultiplePicture 
					:upload-data="{type:null, use_type:20, file_type: '', save_path: 'picture'}"
					type="image"
					show-content="商品主图"
					:is-show-button="true"
					v-model:upload-picture-uid-array="createForm.goods_main_picture_uid_array"
					v-model:upload-picture-url-array="mainPictureUrlArray"
					v-model:limit-number="limit"
					/>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row  type="flex" justify="center">
			<el-image v-for= "(pciture,key) in mainPictureUrlArray" 
				:key="key"
				style="width: 100px; height: 100px;margin: 10px;"
				:src="pciture"
				:zoom-rate="1.2"
				:max-scale="7"
				:min-scale="0.2"
				:preview-src-list="mainPictureUrlArray"
				show-progress
				:initial-index="0"
				fit="cover"
			/>
	</el-row>
</template>
<script setup lang="ts">
//通信
import bus from "@/utils/eventBus";
//公共组件
import UploadMultiplePicture from "@/pages/laravel-fast-api/v1/components/element/Upload/UploadPicture/UploadMultiplePicture.vue"

//主图回显图片数组
const mainPictureUrlArray = ref<string[]>([]);

//添加商品主图
const handleToAddMainPicture = ()=>{
	bus.emit("uploadMultiplePicture", {uploadAlbumUid:0,type:20});
}
</script>