suitFileUpload 文件上传

说明

1、此组件应用于suit-form-attachment。实现附件上传，用于表单元素中的文件提交。 2、此组件实现本小程序公共的样式

使用

<template>
	<view class="suit-form-attachment--wrapper">
		<view class="btn-wrapper">
            <suit-file-upload
                ref="lsjUpload"
                childId="upload1"
                :width="width"
                :height="height"
                :option="optionsAll"
                :size="size"
                :formats="formats"
                :debug="debug"
                :count="limit"
                :instantly="instantly"
                @change="onChange"
                @progress="onprogress"
                @uploadEnd="onuploadEnd"
            >
                <view class="btn">
                    <u-button type="primary" color="#0060C7" :plain="true" text="选择附件"></u-button>
                </view>
            </suit-file-upload>
	</view>
</template>
<script>
  data() {
    return {
        selection: {
            files: new Map()
        }
    }
  },
  methods: {
    onChange(files) {
        this.files = files;
    },
    // 上传进度回调
		onprogress(item) {		
			if (item["responseText"]) {
				let obj = JSON.parse(item.responseText);
				if (obj.success && obj.result) {
					this.docId = obj.result.docInfo.id || 0;
				}
			}
			// 更新当前状态变化的文件
			this.files.set(item.name,item);
			
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif
			
			// 强制更新视图
			// this.$forceUpdate();
		},
        // 某文件上传结束回调(成功失败都回调)
		onuploadEnd(item) {
			if(item.type === 'fail'){
				item.progress = -1
			}
			// 更新当前状态变化的文件
			this.files.set(item.name,item);
			
			// 上传完成后取服务端数据
			if (item['responseText']) {
				this.files.get(item.name).responseText = JSON.parse(item.responseText);
			}
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif
			
			// 强制更新视图
			// this.$forceUpdate();
			const list = this.wxFiles.filter(item=>item.type === 'success')
			loadedPromiseWrapper.trigger()
			this.$emit('uploadEnd',list ,this.docId)
		},
}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值	是否必填
width	容器宽度	String	——	'100%'	否
height	容器高度	String	——	'80rpx'	是
debug	打印调试日志	Boolean	false\true	false	否
option	文件上传接口相关参数见下面	Object	——	——	是
instantly	选择文件后是否立即自动上传，true=选择后立即上传	Boolean	true\false	false	否
count	附件选择上限(个)	Number	——	10	否
size	附件大小上限(M)	Number	——	10	否
wxFileType	微信小程序文件选择器格式限制(all=从所有文件选择，video=只能选择视频文件，image=只能选择图片文件，file=可以选择除了图片和视频之外的其它的文件)	String	all\video\image\file	'all'	否
accept	文件选择器input file格式限制(部分机型不兼容，建议使用formats)	String	——	——	否
formats	限制允许上传的格式，空串=不限制，默认为空，多个格式以逗号隔开，例如png,jpg,pdf	String	——	''	否
childId	控件的id(仅APP有效，应用内每个控件命名一个唯一Id，不同窗口也不要同名Id)	String	——	'lsjUpload'	否
position	控件的定位模式(static=控件随页面滚动;absolute=控件在页面中绝对定位，不随窗口内容滚动)	String	static\absolute	static	否
top,left,right,bottom	设置控件绝对位置，position=absolute时有效	[Number,String]	——	0	否

option说明

属性	描述	类型	可选值	默认值	是否必填
url	上传接口地址	String	——	100%	是
name	上传接口文件key，默认为file	String	——	file	否
header	上传接口请求头	Object	——	——	否
formData	上传接口额外参数	Object	——	——	否

事件

事件名称	说明	回调参数类型
@change	选择文件触发，返回所有已选择文件Map集合	Map
@progress	上传过程中发生状态变化的文件对象，需通过set更新至Map集合	Object
@uploadEnd	上传结束回调，返回参数与progress一致	Object

工具源码及综合示例参考

组件源码 (opens new window) 综合实例 (opens new window)