CareUI

# 上传

# 基础上传

上传文件大小在 5M 以内
<template>
    <!-- :sizeLimit="1024" 默认单位为：KB 。错误提示为 图片大小不能超过 {sizeLimit} KB-->
    <!-- :sizeLimit="{ size: 2, unit: 'MB' }" -->
    <!-- :sizeLimit="{ size: 2, unit: 'MB', message: '图片太大' }" -->
    <!-- :sizeLimit="{ size: 2, unit: 'MB', message: '图片太大，不能超过 {sizeLimit} MB' }" -->

    <!-- 上传接口默认只传一个参数，如果希望自定义参数，可以使用 format 方法格式化参数-->
    <t-upload
        v-model="files"
        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
        tips="上传文件大小在 5M 以内"
        :sizeLimit="{ size: 5, unit: 'MB' }"
        :format-response="formatResponse"
        @fail="handleFail"
    ></t-upload>
</template>
<script>
export default {
    data() {
        return {
            files: [],
        };
    },
    methods: {
        handleFail({ file }) {
            this.$message.error(`文件 ${file.name} 上传失败`);
        },
        // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
        // error 为真时，组件会判定为上传失败
        formatResponse(res) {
            if (!res.url) {
                return { error: '上传失败，请重试' };
            }
            return { ...res, url: res.url };
        },
    },
};
</script>
显示代码 复制代码

# 拖拽上传

是否自动上传：
点击上传  /  拖拽到此区域
<template>
    <div class="demo-upload-column">
        <div class="demo-upload-row">是否自动上传：<t-switch v-model="autoUpload"></t-switch></div>
        <div class="demo-upload-row">
            <t-radio-group variant="default-filled" v-model="display">
            <t-radio-button value="file">文件拖拽上传</t-radio-button>
            <t-radio-button value="image">图片拖拽上传</t-radio-button>
            </t-radio-group>
        </div>

        <!-- data 表示传递给上传接口的额外数据；如果有更复杂的数据场景传递，请使用 format 方法 -->
        <t-upload
            v-model="files"
            :autoUpload="autoUpload"
            :theme="display"
            :data="{ extra_data: 123, file_name: 'certificate' }"
            draggable
            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
        />
    </div>
</template>

<script>
export default {
    data: () => ({
        autoUpload: true,
        display: 'file',
        files: [],
    }),
};
</script>
显示代码 复制代码

# 图片上传

  • 点击上传图片

请选择单张图片文件上传（上传成功状态演示）

  • 点击上传图片

请选择单张图片文件上传（上传失败状态演示）

  • 点击上传图片

请选择单张图片文件上传（自定义预览图片地址）

  • 点击上传图片

允许选择多张图片文件上传，最多只能上传 3 张图片
<template>
    <div class="demo-upload-column">
        <div class="demo-upload-row">
            <t-upload
                action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                v-model="file1"
                @fail="handleFail"
                theme="image"
                tips="请选择单张图片文件上传（上传成功状态演示）"
                accept="image/*"
            ></t-upload>
        </div>
        <div class="demo-upload-row">
            <t-upload
                action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                v-model="fileFail"
                theme="image"
                tips="请选择单张图片文件上传（上传失败状态演示）"
                accept="image/*"
                :formatResponse="formatResponse"
            ></t-upload>
        </div>
        <div class="demo-upload-row">
            <t-upload
                action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                v-model="file2"
                @fail="handleFail"
                theme="image"
                tips="请选择单张图片文件上传（自定义预览图片地址）"
                accept="image/*"
                :formatResponse="formatImgResponse"
            ></t-upload>
        </div>
        <div class="demo-upload-row">
            <t-upload
                action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                v-model="files"
                @fail="handleFail"
                theme="image"
                tips="允许选择多张图片文件上传，最多只能上传 3 张图片"
                accept="image/*"
                multiple
                :max="3"
            ></t-upload>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
        file1: [],
        file2: [],
        files: [],
        fileFail: [],
        };
    },
    methods: {
        // formatResponse 返回后的 url 优先级高于接口返回的 url
        formatImgResponse() {
            return { url: 'https://tdesign.gtimg.com/site/avatar.jpg' };
        },
        // 一旦 formatResponse 返回值包含 error，便会被组件判定为上传失败
        formatResponse() {
            return { error: '网络异常，图片上传失败' };
        },
        handleFail({ file }) {
            this.$message.error(`文件 ${file.name} 上传失败`);
        },
    },
};
</script>

<style scoped>
.demo-upload-row {
  display: inline-block;
  margin-right: 80px;
}
.demo-upload-row + .demo-upload-row {
  margin-top: 80px;
}
</style>
显示代码 复制代码

# 批量上传文件

支持批量上传文件，文件格式不限，最多只能上传 10 份文件
文件名大小状态操作
点击上方“选择文件”或将文件拖拽到此区域
<template>
    <div class="demo-upload-column">
        <t-upload
            v-model="files"
            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
            placeholder="支持批量上传文件，文件格式不限，最多只能上传 10 份文件"
            theme="file-flow"
            multiple
            :auto-upload="false"
            :max="10"
        ></t-upload>
    </div>
</template>

<script>
export default {
    name: 'TUploadFileFlow',

    data() {
        return {
        files: [],
        };
    },
};
</script>
显示代码 复制代码

# 批量上传图片

支持批量上传图片文件
点击上方“选择文件”或将文件拖拽到此区域
<template>
    <div class="demo-upload-column">
        <t-upload
        v-model="files"
        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
        placeholder="支持批量上传图片文件"
        theme="image-flow"
        accept="image/*"
        multiple
        :auto-upload="false"
        :max="8"
        ></t-upload>
    </div>
</template>

<script>
export default {
  name: 'TUploadImageFlow',

  data() {
    return {
      files: [
        // {
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   name: 'loading.svg',
        // },
      ],
    };
  },

  computed: {},

  watch: {},

  methods: {},
};
</script>

<style></style>
显示代码 复制代码

# 输入框文件上传

未选择文件
上传文件大小在 5M 以内
<template>
    <div class="demo-upload-column">
        <div style="width: 350px">
        <t-upload
            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
            :tips="tips"
            v-model="files"
            @fail="handleFail"
            @success="onSuccess"
            theme="file-input"
            placeholder="未选择文件"
        ></t-upload>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
        files: [],
        tips: '上传文件大小在 5M 以内',
        };
    },
    methods: {
        handleFail({ file }) {
        this.$message.error(`文件 ${file.name} 上传失败`);
        },
        onSuccess() {
        this.tips = '';
        },
    },
};
</script>
显示代码 复制代码

← Pagetitle 页面标题 →