更新记录

1.0.0（2020-05-22） 下载此版本

图片多图上传；图片自适应排版

平台兼容性

uni-app

应要求，将多图上传写成组件模式，用起来更为方便，并且结合文章页图片排版！

文章页图片排版

图片数组排版组件，主要用于文章页图片展示排版，类似发表微博，针对图片多少对应相应的样式排版 组件名：img-box

使用方式

在 script 中引用组件

  <script>
    import imgBox from '../../components/hb_imageTypeSet/imagebox.vue'
    export default {
        data() {
            return {
                imgList: [
                    '../../static/bac1.jpg',
                    '../../static/bac1.jpg'
                ]
            }
        },
        onLoad() {

        },
        components: {
            imgBox
        },
        methods: {
        }
    }
  </script>

在 template 中使用组件

     <img-box :imgList='imgList' :num='imgList.length'></img-box>

参数说明

注意

暂时不支持在nvue页面中使用

图片批量上传

多图上传后台，并返回对应回调图片数组 js文件名：upload.js

使用方式

在 script 中引用promise封装的上传函数

<script>
    import uploadBox from '../../components/uploadImg/uploadImg.vue'
    export default {
        data() {
            return {
                params: {
                    uploadname: 'file',
                    url: '后台上传地址',
                    tempFilePaths: [],
                    headers: {
                        token: 'api_token_0B592A5A7CDB9B'
                    }
                }
            }
        },
        onLoad() {

        },
        components: {
            uploadBox
        },
        methods: {
            // 后台返回上传图片结果回调信息
            receiveImglist(data) {
                console.log('receiveImglist', data);
            }
        }
    }
</script>

在 template 中编写图片上传代码

   <template>
    <view class="content">
        <!-- 多图上传示例 -->
        <view class="imgexample1">
            多图上传示例
        </view>
        <uploadBox :params='params' @imglist="receiveImglist"></uploadBox>
    </view>
  </template>

参数说明

支持app/微信小程序/H5上使用