更新记录

1.0.0（2024-05-10） 下载此版本

初始化组件

平台兼容性

tf-img-upload

1. 组件作用
   • 图片上传组件（基于uview上传组件二次封装）
2. 组件引用例子

<template>
    <view class="content">
        <ImgUpload
            name="files"
            :action="action" 
            :header="header" 
            :form-data="formData"
            :file-list="fileList"
            :show-progress="true"
            :notUpload="isDisabled"
            @on-success="uploadImgSuccess"
            @on-remove="removeImg"
        />
    </view>
</template>

<script>
    import ImgUpload from '../../uni_modules/tf-img-upload/components/tf-img-upload/tf-img-upload.vue'
    export default {
        components: {
            ImgUpload
        },
        data() {
            return {
                formData: { //具体参数根据情况而定
                    bizId: null,
                    bizType: 'SETTLEMENT_BILL_FILES',
                    fileAcl: 'PUBLIC_READ_WRITE'
                },
                action: 'http://192.168.0.xxx:xxxx/xxx/xxx',//上传文件接口地址
                header: { //具体参数根据情况而定
                    Authorization: 'xxx',//登录令牌
                    token: "xxx",//token
                },
                fileList:[],
                isDisabled:false
            }
        },
        methods:{
            /**
             * 上传成功事件
             */
            uploadImgSuccess(data, index, lists, name) {
                if (data.code === 0) {
                    this.fileList[index] = data.data[0]
                    uni.showToast({
                        title: '图片上传成功',
                        icon: 'none'
                    })
                    console.log('上传图片',this.fileList)
                } else {
                    uni.showToast({
                        title: '图片上传失败',
                        icon: 'none'
                    })
                }
            },
            /**
             * 删除图片事件
             */
            removeImg(index) {
                this.fileList.splice(index,1)
                console.log('移除图片',this.fileList)
            }
        }
    }
</script>

<style scoped>
</style>

3. 组件属性说明

4. 组件方法说明（具体参照uview官网上传组件事件）