更新记录

1.0.0(2020-05-19) 下载此版本

图片多图上传


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

图片批量上传

多图上传后台,并返回对应回调图片数组 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>

参数说明

参数 类型 说明
uploadname string 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
url string 图片上传地址
headers Object HTTP 请求 Header, header 中不能设置 Referer
tempFilePaths Object 需要上传的文件列表。

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

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

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

许可协议

MIT协议

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