介绍
如何在Vue中利用简单的上传上传组件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强>其主要特点就是:
<李> 支持文件,多文件,文件夹上传
<李> 支持拖拽文件,文件夹上传
<李> 统一对待文件和文件夹,方便操作管理
<李> 可暂停,继续上传
<李> 错误处理
<李> 支持“快传”,通过文件判断服务端是否已存在从而实现“快传”
<李> 上传队列管理,支持最大并发上传
<李> 分块上传
<李> 支持进度,预估剩余时间,出错自动重试、重传等操作
安装
通过npm安装:<代码> npm安装vue-simple-uploader——保存>
<强>使用
初始化
import Vue 得到& # 39;Vue # 39;
import uploader 得到& # 39;vue-simple-uploader& # 39;
import App 得到& # 39;。/App.vue& # 39;
Vue.use(上传)/*,eslint-disable no-new */Vue ({new
,呈现(createElement) {
return 才能createElement(应用)
,}
})。美元山(& # 39;#应用# 39;) 应用程序。vue
& lt; template>
,& lt; uploader :选项=皁ptions",类=皍ploader-example"比;
& lt;才能uploader-unsupport> & lt;/uploader-unsupport>
& lt;才能uploader-drop>
,,& lt; p> Drop files here 用upload or
,,& lt; uploader-btn> select files
,,& lt; uploader-btn : attrs=癮ttrs"祝辞select images
,,& lt; uploader-btn :目录=皌rue"祝辞select folder
& lt;才能/uploader-drop>
& lt;才能uploader-list> & lt;/uploader-list>
,& lt;/uploader>
& lt;/template>
& lt; script>
,export default {
data 才能;(),{
,,return {
,,,选择:,{
,,,,//,可通过,https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例启动服务
,,,,目标:,& # 39;//localhost: 3000/上传# 39;
,,,,testChunks:假
,,,},
,,,attrs:, {
,,,,接受,& # 39;图像/* & # 39;
,,,}
,,}
,,}
,}
& lt;/script>
& lt; style>
,.uploader-example {
,,宽度:880 px;
,,填充:15 px;
保证金才能:40 px auto 0;
,,字体大小:12 px;
,,不必:0,0,10 px rgba (0, 0, 0,,。4);
,}
,.uploader-example .uploader-btn {
,,margin-right: 4 px;
,}
,.uploader-example .uploader-list {
,,max-height: 440 px;
,,溢出:汽车;
overflow-x才能:隐藏;
,,overflow-y:汽车;
,}
& lt;/style> 组件
<强>上传
上传根组件,可理解为一个上传器。
道具
<代码>选项{对象}
参考simple-uploader。js配置.
<代码>自动运行{布尔}
默认真,是否选择文件后自动开始上传。
<强>事件
<李> upload-start开始上传。
<李> file-added(文件)添加了一个文件,一般用作文件校验,如果给文件增加忽视属性为真正的话就会被过滤掉。
<李> file-removed(文件)移除一个文件(文件夹)。
<李> 档案(文件,文件列表)所选择的文件们添加到上传队列后触发。
作用域插槽
<李> 文件数组{}纯文件列表,没有文件夹概念。
<李> 文件列表数组{}统一对待文件,文件夹列表。
<李> 开始是否开始上传了。
<强> UploaderBtn
点选上传文件按钮。
道具
<代码>目录{布尔}
默认假,是否是文件夹上传。
<代码>单{布尔}
默认假,如果设为true,则代表一次只能选择一个文件。
<代码> attrs{对象}
默认{},添加到输入元素上的额外属性。
<强> UploaderDrop
拖拽上传区域。
<强> UploaderList
文件,文件夹列表,同等对待。
作用域插槽
<代码>文件列表数组{}
文件,文件夹组成数组。
<强> UploaderUnsupport
不支持HTML5文件API的时候会显示。
<强> UploaderFiles
文件列表,没有文件夹概念,纯文件列表。
