lxtac-aetherupload
v1.0.6
Published
This package just some functions for myself,so have no docmentation for you.And I include this package in My Project first,Welcome to add issues at Github.
Downloads
10
Readme
LXTAC AetherUpload
- 最新版本 v1.0.4
- 作者 吕志远
- 网址(迁移更新中... ...) https://www.lxtac.com/
**注意:**请及时使用npm update
命令更新模块文件,该插件模块会持续的经常的更新新功能,并关注GitHub动态.您可以在Issues中进行反馈,或者到作者博客 https://www.lxtac.com/(迁移更新中... ...)中进行反馈,作者会第一时间进行反馈.
安装
1.用NPM安装扩展:
npm install lxtac-aetherupload --save
2.引入扩展:
import Upload from 'lxtac-aetherupload'; // 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-aetherupload'
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>