更新记录

1（2021-09-27）

1。基于uniapp 2。基于colorui 3。实现多文件上传

平台兼容性

## 前言 ShareUI,是一个基于colorui的uniapp手机端界面组件库，提供大量的手机端界面组件， 以及整合colorui，提高手机端界面的开发效率以及美观度。

交流

QQ群：795062304

ShareUI介绍

shareui是一个uniapp的快速开发组件库，包含了大量的界面组件和api. 结构上，主要有colorui包，components包和module包。其中components包含了 通用的组件，不依赖于服务端返回的数据结构。而module包下面的组件， 更像是功能组件，其对数据结构有一定的要求。

mo-img-uploader 使用说明

该组件为shareui里的多文件上传组件，上传方式为阻塞式，上传后将地址返回给调用者。

先引入

import moImgUploader from '@/shareui/module/mo-img-uploader/mo-img-uploader.vue';

export default {
    components:{
        'mo-img-uploader':moImgUploader
    },

在模板使用

<mo-img-uploader ref="upload1" :maxLength="9"></mo-img-uploader>

触发上传

async saveFriendInfo(){ this.friend.images = await this.$refs.upload1.uploadAll();

}

注意： 该组件调用了一个通知的Util.js，用于上传代码如下:

var result = await this.Util.uploadFiles(this.imgList);

Util的这个方法，如下

/**
     * 上传单个文件
     * @param {Object} file
     */
    this.uploadSingleFile = async function(file){
        try{
            let result = await uni.uploadFile({
                url:Url.file_upload,
                filePath:file,
                name:"file"
            })
            let info = JSON.parse(result[1].data);
            console.log("path "+info.path)
            return info.path;
        }catch(e){
            console.log(e)
        }

    }

    /**
     * 小程序端只能一个文件一个文件上传
     * @param {Object} files 文件数组 
     * @return 返回上传后的路径，多个路径以逗号隔开
     */
     this.uploadFiles = async function(files){
        console.log("enter uploadFiles and files.length "+files.length)
        var paths = [];
        var finish = false;

        uni.showLoading({
            title: '文件上传中'
        });
        for (let file of files) {
            let path = await this.uploadSingleFile(file);
            paths.push(path);
        }
        uni.hideLoading();
        var params = {
            paths:paths.join(","),
            size:paths.length
        }
        return params;
    };

上面的代码，需要填写一下文件上传的地址： Url.file_upload这个改成自己的上传地址，上传后，需要返回一个json对象， 包含path属性，即该文件的保存地址。

注意在App.vue里引入样式：

@import "shareui/colorui/main.css";
@import "shareui/colorui/icon.css";
@import "shareui/colorui/animation.css";
@import "shareui/share.scss";