JiangningUrbanManageApp/components/jin-attachment/readme.md

附件上传组件 jin-attachment

该组件依赖less, 如果项目没有安装less,请先安装

组件功能说明

1. 可选择多张图片
2. 选择图片后自动添加到后面
3. 图片上自带删除图标，点击可删除
4. 图片可点击预览
5. 可获取当前的图片地址数组
6. 可上传图片到服务器
7. 可设置上传的图片数量
8. APP端可以上传文件
9. 可配置是否显示上传进度条
10. 微信端可以选择文件，利用接口wx.chooseMessageFile

已测试安卓端、微信小程序端、H5端

使用说明

拷贝该组件到components目录下之后
在 script 中引用组件

import Attachment from '../../components/jin-attachment/jin-attachment.vue';
export default {
    components: {Attachment}
}

在 template 中使用组件：

<Attachment mode="create" :canUploadFile="true" :uploadFileUrl="uploadFileUrl" :heaer="header" :showProcess="true" :attachmentList.sync="attachmentList"></Attachment>

重要说明

APP端可以上传文件，但是需要引入uni-app插件市场的chuck-filemanager插件，可以选择试用，然后在mainfest.json中勾选该插件，既可在自定义基座中运行

chuck-filemanager插件地址 https://ext.dcloud.net.cn/plugin?id=680

组件参数说明

属性名	类型	默认值	说明
attachmentList	Array<Object>	[]	初始化的图片数据，可用于单向数据初始化，需要双向绑定可直接用 :attachmentList.sync="attachmentList"
mode	String	null	组件模式，create => 可新增或编辑附件 不填或其他 => 只能查看附件
uploadFileUrl	String	null	上传文件的服务器url
showProcess	Boolean	true	是否显示进度，默认显示
header	Object	null	上传图片到服务器时，HTTP 请求 Header
limit	Number	null	限制可上传的图片数量,图片最大上传数量
fileKeyName	String	'file'	用于在服务端通过自定义key值获取该文件数据
canUploadFile	Boolean	false	是否能上传文件，只有微信端和安卓版设置为true时有效

attachmentList参数的 Object说明

属性名	类型	默认值	说明
type	String	'image'	文件类型 image => 图片，file => 文件
url	String	null	文件或者图片的url地址
fileName	String	null	文件名
process	Number	null	文件或图片的上传进度

自定义事件说明

事件名称	说明	返回参数
uploadSuccess	图片上传成功回调函数，每选择一个或者多个附件后会立即上传至后端服务器	返回的参数与 uni.uploadFile接口参数一致

demo示例

<template>
	<view style="padding: 30rpx;">
		<Attachment mode="create" :canUploadFile="true" :uploadFileUrl="uploadFileUrl" :heaer="header" :showProcess="true" :attachmentList.sync="attachmentList" @uploadSuccess="uploadSuccess"></Attachment>
	</view>
</template>

<script>
import Attachment from '../../components/jin-attachment/jin-attachment.vue';
export default {
	data() {
		return {
			uploadFileUrl: 'http://localhost:8080', //替换成你的后端接收文件地址
			header: {
				// 如果需要header，请上传
			},
			attachmentList: [
				{
					url: 'https://avatar-static.segmentfault.com/151/147/1511478734-593e62d4d3076_big64',
					type: 'image',
					fileName: 'xxx.png'
				},
				{
					url: 'https://avatar-static.segmentfault.com/820/689/820689728-59e9b54a71fdc_huge256',
					type: 'image',
					fileName: 'xxx.png'
				},
				{
					url: 'https://avatar-static.segmentfault.com/820/689/820689728-59e9b54a71fdc_huge256',
					type: 'image',
					fileName: 'xxx.png'
				},
				{
					url: 'https://avatar-static.segmentfault.com/820/689/820689728-59e9b54a71fdc_huge256',
					type: 'image',
					fileName: 'xxx.png'
				},
				{
					url: 'https://avatar-static.segmentfault.com/820/689/820689728-59e9b54a71fdc_huge256',
					type: 'image',
					fileName: 'xxx.png'
				},
				{
					type: 'file',
					fileName: '这个组件真棒.doc',
					url: 'https://avatar-static.segmentfault.com/820/689/820689728-59e9b54a71fdc_huge256'
				}
			]
		}
	},
	components: {
		Attachment
	},
	methods:{
		uploadSuccess(result) {
			if(result.statusCode == 200) {
				//上传成功的回调处理
				uni.showToast({
					title: '上传成功',
					icon: 'none'
				});
			}else{
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		}
	}
	
}
</script>

<style>
</style>

> 如遇问题，欢迎评论指出，作者微信 wangjinxin613，添加好友时请备注 jin-attachment