GG

# gg-upload-img 图片上传

gg-upload-img

图片上传，一般和表单配合使用，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggUploadImg from '@/components/gg-upload-img/gg-upload-img.vue'
export default {
    components: {ggUploadImg}
}
1
2
3
4

在 vue 中使用组件

<template>
    <view>
        <gg-upload-img v-model="formData.img" :src="formData.img_original" />
    </view>
</template>
<script>
export default {
    data(){
        return {
            formData:{
                img:'',
                img_original:''
            },
        };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 属性说明

属性名 类型 默认值 说明
uploadType String one 上传类型（ one单图，more多图，big大图 ）
maxlength Number 1 上传图片个数
filename String file 上传表单名
uploadParam Object - 额外传递的数据，会拼接 file_name :filename 进去
v-model Array,Object,String - 具体使用如下
src Array,Object,String - 具体使用如下
uploadTip Object - 提示内容

# 当 { uploadType:one } 或者 { uploadType:big } 时

属性名 类型 默认值 说明
v-model String - 传递单图需要保存的字符串
src String null 含 http:// 或 https:// 的图片地址，作为呈现

# uploadTip 结构&默认值

属性名 类型 默认值 说明
dimension String 长宽：750375像素; 尺寸
format String 格式：jpg/png; 格式
size String 大小：小于2MB; 大小

例如：

<template>
    <view>
        <gg-upload-img v-model="formData.img" :src="formData.img_original" />
    </view>
</template>
<script>
export default {
    data(){
        return {
            formData:{
                img:'/upload/img/xxx.png',
                img_original:'http://xxx.com/upload/img/xxx.png',
            },
        };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 当 { uploadType:more } 时

属性名 类型 默认值 说明
v-model Array - 双向绑定数据
src Array null 已有图片数据

例如：

<template>
    <view>
        <gg-upload-img v-model="formData.img" :src="formData.img_original" />
    </view>
</template>
<script>
export default {
    data(){
        return {
            formData:{
                img: [
                    '/upload/img/xxx1.png',
                    '/upload/img/xxx2.png',
                    '/upload/img/xxx3.png'
                ],
                img_original: [
                    'https://xxx.com/upload/img/xxx1.png',
                    'https://xxx.com/upload/img/xxx2.png',
                    'https://xxx.com/upload/img/xxx3.png',
                ],
            },
        };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

← 规格选择 →