更新记录

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

图片多图上传

平台兼容性

uni-app

图片批量上传

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

使用方式

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

  <script>
    import util from '../../components/more-image-upload/upload.js';
    export default {
        data() {
            return {
                ImageList: [],
                param:{}
            };
        },
        methods: {
            // 添加图片
            addImage() {
                let that = this;
                    uni.chooseImage({
                        count: 3,
                        sizeType: 'compressed',
                        sourceType: 'album',
                        success(res) {
                            console.log('后台返回图片链接数组',res);
                        }
                    })
            },
            sendque() {
                this.param={
                    uploadname:'file',
                    url:'后台上传地址',
                    tempFilePaths:this.ImageList,
                    headers:{token:'api_token_0B592A5A7CDB4D6AAEF1369B'}
                }
                util.uploadImage(param).then(res => {
                    console.log('后台返回的列表', res);
                })
            }
        }
    }
  </script>

在 template 中编写图片上传代码

     <template>
        <view class="content">
            <view class="imgtop flex wrap">
                <view class="imglist flex wrap">
                    <block v-for="(item,ind) in ImageList" :key="ind" v-if="ImageList.length>0">
                        <view class="imgbox">
                            <image class="imageitem" :src="item" mode="aspectFill"></image>
                            <image src='../../static/send-del.png' class='del-img'></image>
                        </view>
                    </block>
                    <view class="picbox flex direaction center" @click="addImage">
                        <image src="../../static/addpic.png" mode=""></image>
                    </view>
                </view>
            </view>
            <view class="sendbtn flex align center" @click="sendque">
                多图上传
            </view>
        </view>
     </template>

参数说明

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