单个导入组件

    // 1.引入组件
    import sunsinUpimg from './components/sunsin-upimg.vue'

    // 2.注册组件
    components: {
        sunsinUpimg
    },

    //页面-实例
    <template>
        <view>
            <view>
                <sunsin-upimg url="https://ww...." :count="2" :autoplay="true" @onUpImg="upImgData" />
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {

                };
            },
             // 注册组件
            components: {
                sunsinUpimg
            },
            //获取上传图片的所有信息,为数组
            upImgData(e){
                console.log('来了,伙计',e)
            }
        }
    </script>

    <style>

    </style>

全局导入组件(main.js)

     // 1.引入组件
    import sunsinUpimg from './components/sunsin-upimg.vue'
    // 2.注册组件
    Vue.component('sunsin-upimg', sunsinUpimg)
   // 页面-实例
    <template>
        <view>
            <view>
                <sunsin-upimg url="https://ww...." :count="2" :autoplay="true" @onUpImg="upImgData" />
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {

                };
            },
            methods:{
                //获取上传图片的所有信息,为数组
                upImgData(e){
                    console.log('来了,伙计',e)
                }
            }
        }
    </script>

    <style>

    </style>

组件使用(请严格按照以下格式进行配置,目前仅支持以下3种图片上传方式)

    <sunsin-upimg url="https://xxx" :count="2" :autoup="true" @onUpImg="upImgData" /> 限制上传图片数量
    <sunsin-upimg url="https://xxx" :count="2" :autoup="false" @onUpImg="upImgData" /> 限制上传图片数量
    <sunsin-upimg url="https://xxx"  :notli="true" @onUpImg="upImgData" /> 不限制上传图片数量 

关于获取上传后返回的值

v1.3更新:方法upImgData可获取上传图片的所有信息,为数组(可以通过此来计算图片长度以及其它信息)
v1.4更新:自定义样式名修改以及增加了上传图片压缩可选项

页面参数说明

count: String [默认1张]

  • 上传图片数量

autoup: Boolean [默认true]

  • 是否自动上传图片

url: String

  • 上传后端地址

notli: Boolean [默认false]

  • 是否开启不限制上传图片数量,v1.3新增

upreduce: Boolean [默认true]

  • 是否开启选择图片时压缩(不支持h5),v1.4新增

致谢

919809734@qq.com ->预览错误的问题,是因为每次都生成了新数组,而非合并数组 133行改成 _that.imgs = _that.imgs.concat(res.tempFilePaths) 即可

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

相机

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问