更新记录

1.1（2019-11-04）

微信小程序可选择文件

1.0（2019-10-18）

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

平台兼容性

附件上传组件 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参数的 Object说明

自定义事件说明

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