商品上传

代码事例

<template>
	<fk-space align="start" direction="vertical">
		<fk-space align="start" direction="vertical">
            <h5>查看状态</h5>
			<ShopUpload v-model="vm.str" :disabled="false" :showTools="true" :beforeCommand="beforeCommand" @success="handleSuccess" />
            <ShopUpload :model-value="{name: '实拍图'}" :disabled="true" @success="handleSuccess" />
		</fk-space>
        <fk-space direction="vertical">
            <h5>可上传</h5>
            <fk-input />
            <ShopUpload v-model="vm.str" :disabled="false" @success="handleSuccess" @delete="handleDelete" />
        </fk-space>
		<fk-space align="start" direction="vertical">
            <h5>文件名可自定义，并固定5个上传，可拖拽排序</h5>
			<ShopUpload v-model="vm.shipaitu" draggable multiple :disabled="false" @success="handleSuccess">
				<template #name="{ item }"> 实拍图 </template>
			</ShopUpload>
		</fk-space>
        <fk-space direction="vertical">
            <h5>默认多个上传</h5>
            <ShopUpload v-model="vm.strs" multiple draggable />
            <ShopUpload v-model="vm.strs" multiple draggable layout="left-empty"/>
        </fk-space>
        <fk-space align="start" direction="vertical">
            <h5>视频单个上传</h5>
			<ShopUpload v-model="vm.video" :hover-preview="true" empty-footer-text="主图" tip="上传视频" accept="video" :disabled="false">
				<template #name> 主图 </template>
			</ShopUpload>
		</fk-space>
        <fk-space align="start" direction="vertical">
            <h5>不限制文件上传</h5>
			<ShopUpload class="design-upload" style="width: 600px;" v-model="vm.files" hoverPreview="file-info" imgLayout="list" layout="left-empty" :showFileName="false" accept="*" :limit="99" multiple draggable tip="点击上传文件" :disabled="false" @success="handleSuccess">
                <template #empty>
                    <div class="upload-img-list-empty-icon">
                        <i class="erpfont icon-plus" />
                        <div class="upload-img-list-empty-tip">点击上传图片</div>
                    </div>
                    <fk-button type="primary" class="sync-up-btn">同上</fk-button>
                </template>
            </ShopUpload>
		</fk-space>
	</fk-space>
	<fk-row>
		<JsonViewer :data="vm" />
	</fk-row>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { ShopUpload } from '@erp/biz';

const beforeCommand = (type) => {
    if (type === 'reupload') {
        alert('reupload');
        return false;
    }
}

const vm = reactive({
    files: [],
	str: 'https://test.img.fukerp.com/spider/heTcpbIWH2zh7eq34fyLLyDEJCZsqcWe3ogN6GdO.jpg',
	strs: [
		{
			uid: '1741084883954-0',
			url: 'https://test.img.fukerp.com/default/XZwiVSS4GxhOp85aqYaom3xjKCJ6equzdrS9NGxd.mp4',
			name: '4.mp4',
		},
	],
	shipaitu: [{}, {}, {}, {}, {}],
    video: 'https://test.img.fukerp.com/default/XZwiVSS4GxhOp85aqYaom3xjKCJ6equzdrS9NGxd.mp4'
});

const handleSuccess = (item: any) => {
    console.log('handleSuccess >>', item);
}

const handleDelete = (item: any) => {
    console.log('handleDelete >>', item);
}

</script>
<style lang="less">
.design-upload {
    .upload-img-item-empty {
        position: relative;
        overflow: visible;
        &:hover {
            .sync-up-btn {
                opacity: 1;
            }
        }
    }
    .upload-img-item {
        margin-top: 6px;
    }
    .sync-up-btn {
        position: absolute;
        right: -4px;
        top: 0;
        transform: translateX(100%);
        opacity: 0;
        z-index: 2,
    }
    .fk-list-wrapper {
        width: calc(100% - 160px);
        margin-top: 0;
        .upload-img-item {
            margin: 6px;
            border: 1px solid var(--color-border-2);
        }
    }
    .fk-list-content-wrapper > div {
        flex-wrap: wrap;
    }
}

</style>

商品上传组件 API

<shop-upload> Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	ShopUploadItem	-
disabled	是否禁用	boolean	false
accept	文件类型	string	'image'
multiple	是否可以多长图片上传	boolean	false
width	上传图片宽度	number	120
height	上传图片高度	number	120
action	上传地址	string	-
max-siz	最大上传大小	number	5
limit	最大上传数量	number	function(props) { if (props.multiple) { return 5; } else { return 1; } }
hover-preview	预览数量	boolean	function(props) { return props.disabled;}
preview-width	预览图片宽度	number	240
image-url-formatter	图片地址格式化	(item: ShopUploadItem, type: ImageViewType) => string	-
draggable	是否可拖拽 DraggableProps	boolean | DraggableProps	false
tip	提示	string	-
show-tools	是否显示工具	boolean	function(props) { return !props.disabled;}

<shop-upload> Events

事件名	描述	参数
success	上传成功	files: mixed res: mixed
delete	文件删除	file: mixed index: mixed

<shop-upload> Slots

插槽名	描述	参数
name	footer slot	fileItem: FileItem index: Number