图片上传

介绍

UploadImg是一个图片上传组件

引入

import Vue from 'vue';
import { UploadImg, UploadImgList } from '@lambo-design-mobile/upload-img';

Vue.use(UploadImg);
Vue.use(UploadImgList);

代码演示

基础用法

<upload-img @upload-result="uploadResult" @delete-action="deleteAction" />

import { UploadImgList } from "@lambo-design-mobile/upload-img";
export default {
    components: { UploadImgList },
    methods: {
        uploadResult(file) {
            console.log(file);
        },
        deleteAction(file) {
            console.log(file);
        },
    }
}

单个图片更换

<upload-img @upload-result="uploadResult" @delete-action="deleteAction" :defaultImg="defaultImg" />

export default {
    data() {
        return {
            defaultImg: "e99bc90e8b674ec59acdec0775b92a31",
        }
    },

    methods: {
        uploadResult(file) {
            console.log(file);
        },
        deleteAction(file) {
            console.log(file);
        },
    }
}

单个图片展示

<upload-img :showOnly="true" :defaultImg="defaultImg" />

export default {
    data() {
        return {
            defaultImg: "e99bc90e8b674ec59acdec0775b92a31",
        }
    },
}

图片列表上传

<upload-img-list @upload-result="uploadResult" @delete-result="deleteResult" />

import { UploadImgList } from "@lambo-design-mobile/upload-img";
export default {
    components: { UploadImgList },

    methods: {
        uploadResult(file) {
            console.log(file);
        },
        deleteResult(result) {
            console.log(result);
        }
    }
}

图片列表更换

<upload-img-list @upload-result="uploadResult" @delete-result="deleteResult" :fileList="imageList" />

import { UploadImgList } from "@lambo-design-mobile/upload-img";
export default {
    components: { UploadImgList },
    data() {
        return {
            imageList: [
                {
                    fileId: 'e99bc90e8b674ec59acdec0775b92a31',
                    fileName: 'authIcon.jpg'
                },
                {
                    fileId: 'd1f52ea7333e453da686e86b5834d5ca',
                    fileName: 'appIcon.jpg'
                }
            ]
        }
    },

    methods: {
        uploadResult(file) {
            console.log(file);
        },
        deleteResult(result) {
            console.log(result);
        }
    }
}

图片列表展示

<upload-img-list :showOnly="true" :fileList="imageList" />

import { UploadImgList } from "@lambo-design-mobile/upload-img";
export default {
    components: { UploadImgList },
    data() {
        return {
            imageList: [
                {
                    fileId: 'e99bc90e8b674ec59acdec0775b92a31',
                    fileName: 'authIcon.jpg'
                },{
                    fileId: 'd1f52ea7333e453da686e86b5834d5ca',
                    fileName: 'appIcon.jpg'
                }
            ]
        }
    },
}

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------------------|-------------------|---------|------------------|----| | ossServerContext | 图片上传后端应用上下文 | string | /ibp-upms-server |----| | ossImgPutUrl | 图片上传后端接口路径 | string | /oss/file/put |----| | defaultImg | 单个图片组件生效，默认回显图片ID | string | ----- |----| | ossImgGetUrl | 图片下载后端接口路径 | string | /oss/file/get/ |----| | showOnly | 展示图片, 不可修改 | boolean | false |----| | fileList | 图片列表组件生效 | array | ----- |----|

Events

| 事件名 | 说明 | 回调参数 | |------------------|------------|-------| |upload-result| 图片上传成功 | file | |delete-action| 单个图片组件删除成功 | file | |delete-result| 图片列表组件删除成功 | array |