# bz-upload 图片上传

# 基本用法

九宫格形式的图片上传. 用于将本地的图片或文件上传至服务器. 该组件于 1.0.2 版本新增。

通过 v-model 可以绑定已经上传的文件列表，并展示文件列表的预览图。

注意：若你的服务端接口返回的图片url的结构或格式不同，请通过 processRes 参数方法实现转换。

扫码预览

<template>
    <view class="demo-ui-page">
        <view class="demo-content">
            <view class="demo-title">bz-upload 图片上传</view>
            <demo-cell>
                <bz-upload
                    serverUrl="http://10.0.12.252:7010/upload"
                    :processRes="processRes"
                ></bz-upload>
            </demo-cell>
            <demo-cell title="调试">
                <bz-upload
                    v-bind="params"
                    :processRes="processRes"
                ></bz-upload>
            </demo-cell>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            params: {
                width: '80px',
                column: '',
                borderRadius: '',
                margin: '12px',
                delConfirm: true,
                forbidDel: false,
                forbidAdd: false,
                serverUrl: 'http://10.0.12.252:7010/upload',
                limit: 9,
                sourceType: ['album', 'camera'],
                imageFormat: [],
                size: 10
            }
        }
    },
    methods: {
        processRes(res) {
            console.log('---', res)
            return res.url || ''
        }
    }
}
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

展开刷新关闭

# 属性说明

属性名	类型	默认值	说明
value	Array	[]	初始化图片路径数组
serverUrl	String	-	初始化图片路径数组
width	String	'100px'	服务器接口地址。当接口地址为空时，直接返回本地图片地址
column	[Number、String]	-	展示列数(优先级高于 width)
borderRadius	String	-	边框圆角
margin	String	'10px'	图片间隔
imageFit	String	'aspectFill'	图片填充方式，详细看 image
delConfirm	Boolean	false	删除图片前是否弹框确认
forbidDel	Boolean	false	禁用删除
forbidAdd	Boolean	false	禁用添加
limit	Number	9	限制数量
size	Number	14	单张图片大小限制 MB
sizeType	Array	['original', 'compressed']	original 原图，compressed 压缩图，默认二者都有
sourceType	Array	['album', 'camera']	album 从相册选图，camera 使用相机，默认二者都有。
imageFormat	Array	[]	可上传图片类型，默认为空，不限制. 如： ['jpg','png','gif']
fileKeyName	String	"file"	文件对应的 key，默认为 file
header	Object	{}	HTTP 请求 Header, header 中不能设置 Referer。
formData	Object	{}	HTTP 请求中其他额外的 form data
limit	Number	9	限制数量
processRes	Function	(res) => (res.data)	处理请求响应，需要 return 当前的 url
beforeChoose	Function	() => (true)	上传前处理，若返回 false，则不执行上传
@remove	Handler	-	删除图片事件
@change	Handler	-	图片信息改变事件

← bz-select 下拉选择器 bz-drawer 抽屉 →