更新记录

v2.77（2023-04-26）

F：修复全局变量造成的报错

v2.76（2023-04-25）

F：修改文档

v2.75（2023-04-25）

U：兼容支付宝小程序

平台兼容性

Upload-Image 上传图片

该组件可以搭配好友黄河爱浪的插件获取 https://ext.dcloud.net.cn/plugin?id=2316获取压缩图片的功能

Props

Events

代码演示

请求预览图片

    <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3"></sunui-upimg>

自定义上传图标

<sunui-upimg :url="upPicUrl" ref="upload2" title="上传照片1" @upload="handleLoaded2" @change="handleChange2" :number="3">
    <template v-slot:icon>
        <text class="s-add-list-btn-icon">+</text>
    </template>
</sunui-upimg>

限制上传图片格式

<sunui-upimg :url="upPicUrl" :before-upload="onBeforeUploadFactory" ref="upload2" title="上传照片2" @upload="handleLoaded3" @change="handleChange3" :number="3">
    <template v-slot:icon>
        <text class="s-add-list-btn-icon">+</text>
    </template>
</sunui-upimg>

限制上传图片大小

<sunui-upimg :url="upPicUrl" :before-upload="onBeforeUploadSize" ref="upload3" title="上传照片2" @upload="handleLoaded3" @change="handleChange3" :number="3">
    <template v-slot:icon>
        <text class="s-add-list-btn-icon">+</text>
    </template>
</sunui-upimg>

Example

<template>
    <view>
        <view label="上传图片"><text value="这里仅介绍上传图片的一些示例,更多请查看文档"></text></view>

        <view label="演示从服务器请求预览图片">
            <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3"></sunui-upimg>
        </view>

        <view label="自定义上传图标+指定上传按钮宽高">
            <sunui-upimg :url="upPicUrl" ref="upload2" title="上传门店照片" :size="['220rpx', '100%']" @upload="handleLoaded2" @change="handleChange2" :number="1">
                <template v-slot:icon>
                    <text class="s-add-list-btn-icon">+</text>
                </template>
            </sunui-upimg>
        </view>

        <view label="限制上传图片格式/大小">
            <sunui-upimg :url="upPicUrl" :before-upload="onBeforeUpload" ref="upload3" title="上传照片2" @upload="handleLoaded3" @change="handleChange3" :number="3">
                <template v-slot:icon>
                    <text class="s-add-list-btn-icon">+</text>
                </template>
            </sunui-upimg>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 上传图片域名
            upPicUrl: 'https://cx.csredian.com/app/index.php?i=7&c=entry&a=wxapp&v=2.2.4&do=upload_img&m=wjyk_sqpt'
        };
    },
    onLoad() {
        // 设置预览图片
        this.$s.nextTick(() => {
            this.$refs.upload1.setItems(['https://cx.csredian.com//attachment/images/1682415359apmlab230567adc562ee0c1cb7fcd6ec9c78.png']);
        });
    },
    methods: {
        onBeforeUpload(file, index) {
            let fileType = ['image/png', 'image/jpeg'];

            if (file.size / 1000 > 51.2) {
                this.$s.toast('图片大小不能大于50K');
                return false;
            }
            if (fileType.indexOf(fileType) === -1) {
                this.$s.toast(`仅支持${fileType.join('、').replace(/image\//g, '')}图片格式`);
                return false;
            }
        },
        // 上传
        handleChange1() {
            this.$refs.upload1.upload();
        },
        handleChange2() {
            this.$refs.upload2.upload();
        },
        handleChange3() {
            this.$refs.upload3.upload();
        },
        // 获取上传或者预览后的图片
        handleLoaded1(e) {
            console.log(e);
        },
        // 获取上传或者预览后的图片
        handleLoaded2(e) {
            console.log(e);
        },
        // 获取上传或者预览后的图片
        handleLoaded3(e) {
            console.log(e);
        }
    }
};
</script>

<style lang="scss">
.s-add-list-btn-icon {
    font-size: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-bottom: 20rpx;
    color: #999;
}
</style>