上传组件使用

图片上传

单图上传

示例:

<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>