更新记录

1.0.1（2024-07-17） 下载此版本

第一版上传插件

平台兼容性

使用方法

import WolfFileUpload from '@/components/wolf-file-upload/index.vue';
components:{
    WolfFileUpload
},

<WolfFileUpload
    :uploadWidth="286"
    :uploadHeight="214"
    :windowHeight="windowHeight"
    :flag="1"
    :fileList="fileList1"
    :imageSize="1"
    :defaultStr="'点击上传执照'"
    :params="{name: '', type: ''}"
    :uploadUrl="'http://xxx.xxx.xxx/uploadFile'"
    :token="接口需要验证的用户token"
    @uploadSuccess="uploadSuccess"
    @delImgItem="delImgItem"
/>

参数

说明

/*上传成功回调触发，res返回的内容，_flag传入的flag值，用于多个控件区分处理*/
uploadSuccess(res, _flag){

}

/*点击删除按钮触发，_flag传入的flag值，用于多个控件区分处理，_index删除对应图片的下标*/
delImgItem(_flag, _index){

}

示例

<WolfFileUpload
    :windowHeight="windowHeight"
    :flag="1"
    :fileList="fileList1"
    :imageSize="6"
    :uploadUrl="'http://xxx.xxx.xxx/uploadFile'"
    :token="接口需要验证的用户token"
    @uploadSuccess="uploadSuccess"
    @delImgItem="delImgItem"
/>

<WolfFileUpload
    :uploadWidth="286"
    :uploadHeight="214"
    :windowHeight="windowHeight"
    :flag="2"
    :fileList="fileList2"
    :imageSize="1"
    :defaultStr="'点击上传执照'"
    :params="{name: '', type: ''}"
    :uploadUrl="'http://xxx.xxx.xxx/uploadFile'"
    :token="接口需要验证的用户token"
    @uploadSuccess="uploadSuccess"
    @delImgItem="delImgItem"
/>

<script>
    import WolfFileUpload from '../../components/wolf-file-upload/index.vue'
    export default {
        components: {
            WolfFileUpload
        },
        data() {
            return {
                fileList1: [],
                fileList2: [],
                windowHeight: 0
            }
        },
        onLoad() {
            this.windowHeight = uni.getSystemInfoSync().windowHeight
        },
        methods: {
            /**
             * 图片删除
             * @param {Object} _flag
             * @param {Object} _index
             */
            delImgItem(_flag, _index){
                if(_flag == 1){
                    this.fileList1.splice(_index, 1)
                }else if(_flag == 2){
                    this.fileList2 = []
                }
            },
            /**
             * 上传图片回调
             * @param {Object} res
             * @param {Object} _flag
             */
            uploadSuccess(res, _flag){
                console.log("上传图片回调")
                console.log(res)

                //以下根据自己接口返回值处理
                let x = {
                    url: ''
                }

                if(_flag == 1){
                    this.fileList1.push(x)
                }else if(_flag == 2){
                    this.fileList2.push(x)
                }
            },
        }
    }
</script>