lxtac-upload v1.0.2

LXTAC Upload

• 最新版本 v1.0.1
• 作者 吕志远
• 网址(迁移更新中... ...) https://www.lxtac.com/

注意:请及时使用npm update命令更新模块文件,该插件模块会持续的经常的更新新功能,并关注GitHub动态.您可以在Issues中进行反馈,或者到作者博客 https://www.lxtac.com/(迁移更新中... ...)中进行反馈,作者会第一时间进行反馈.

安装

1.用NPM安装扩展: npm install lxtac-upload --save

2.引入扩展: import Upload from 'lxtac-upload'; // LXTAC AetherUpload Plugin;

3.使用扩展:

<template>
    <div class="home">
        <form>
            <div class="form-group " id="upload-wrapper">
                <label>文件：</label>
                <div class="controls">
                    <input type="file" id="upload-resource" @change="upload($event)"/>
                    <div class="progress">
                        <div id="upload-progressbar" style="background:blue;height:6px;width:0;"></div>
                    </div>
                    <span id="upload-output"></span>
                    <input type="hidden" name="file1" id="upload-savedpath">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">点击提交</button>
        </form>
        <div id="result"></div>
    </div>
</template>

<script>
    import upload from 'lxtac-upload'
    
    export default {
        name: 'home',
        data() {
            return {
                wrapperDom: '#upload-wrapper',   // 组件最外部需要一个Div的ID，用以包装组件
                resourceDom: '#upload-resource', // 上传文件Input元素的ID，用以标识上传围巾啊;
                outputDom: '#upload-output', // 用来标识提示信息Span的ID;
                progressBarDom: '#upload-progressbar',   // 进度条的ID;
                group: 'file', // 文件分组名,后端提供;
                savedPathDom: '#upload-savedpath',   // 需要一个自定义名称的ID，以及一个自定义名称的name值, 用以标识资源储存路径自动填充位置
                preprocessRoute: '/aetherupload/preprocess',   // 设置预处理路由
                uploadingRoute: '/aetherupload/uploading', // 上传分块路由
                headers: {},  // Header头数据
            }
        },
        methods: {
            upload: function (event) {
                upload(event,
                    this.wrapperDom,
                    this.resourceDom,
                    this.outputDom,
                    this.progressBarDom,
                    this.group,
                    this.savedPathDom,
                    this.preprocessRoute,
                    this.uploadingRoute,
                    this.headers,
                    function () {   // 上传成功后的回调函数
                        console.log('回调信息:',this);
                    });
            }
        }
    }
</script>