更新记录

1.0（2023-08-27）

无

平台兼容性

上传图片

示例

如果需要用该组件，请先安装uview1.0才能使用或者组件下载下来自行替换uview1.0的进度条（u-line-progress）和图片组件（u-image）：

此组件是基于uview1.0开发的上传图片组件，该组件方法基本继承uview1.0的API，不懂的私信 该文档api继承了uview1.0的api方法 https://v1.uviewui.com/components/upload.html

<template>
        <xzl-upload :show-progress="true" :upload-text="uploadText" multiple ref="uUpload" :header="header"
            :action="action" :auto-upload="true" :max-size="2* 1024 * 1024" @on-change="onChoose" name="encryption"
            max-count="9" :fileList="fileList" @on-list-change="onListChange" @on-uploaded="onUploaded"
            @on-progress="progress" @on-remove="remove" @befordelIndex="befordelIndex">
        </xzl-upload>
</template>
    export default {
        data() {
            return {
                action: xxx + '/upload',//后端地址,本人的上传图片服务用的nodejs服务需要联系我
                header: {
                    'Authorization': uni.getStorageSync('openid') ? uni.getStorageSync(
                        'openid') : ''
                },
                FormData: [],
                uploadText: '上传图片',
                fileList: [],
                delIndex: '',
            }
        },
        methods: {
            onChoose() {
                //获取图片路径
                let imgpat = this.$refs.uUpload.lists;
                this.FormData = imgpat
            },
            onListChange(list, name) {
                this.$emit('change', list)
            },
            onUploaded(list, name) {
                <!-- 该list包含服务器返回的res和进度条的信息可根据自己条件获取 -->
                console.log('完成图片上传', list, name);
                this.$emit('changeSuccess', list)
            },
            remove(index, lists) {
                this.$emit('removeImg', this.delIndex)
            },
            progress(res, index, lists, name) {
                this.fileList = lists
                console.log('进度', res.progress, index, lists);
            },
            befordelIndex(index) {
                <!-- 该方法是本人新增  功能时获取删除之前时该图片索引，方便用户删除，然后通过remove方法抛出去 -->
                this.delIndex = index
            },
        }
    }

在线demo体验地址：