Vue-upload-container NPM

Vue Upload Container

基于 Vue 的文件上传容器

📦 安装

$ npm i vue-upload-container -S

🔨 使用

下面展示点击图片，弹窗选择新图片上传，替换原图片

<template>
  <div class="home">
    <UploadContainer
      :action="uploadUrl"
      :headers="{ Token: token }"
      :fileName="'icon'"
      :limit="1"
      :maxSize="1024 * 1024"
      :minSize="1024 * 10"
      :beforeSelectFile="beforeSelectFile"
      :beforeUploadAll="beforeUploadAll"
      :beforeUpload="beforeUpload"
      :onExceedLimit="onExceedLimit"
      :onExceedMinSize="onExceedMinSize"
      :onExceedMaxSize="onExceedMaxSize"
      :onChange="onChange"
      :onBegin="onBegin"
      :onProgress="onProgress"
      :onSuccess="onSuccess"
      :onError="onError"
    >
      <div
        class="img-area"
        :style="{ 'background-image': `url(${previewUrl})` }"
      ></div>
    </UploadContainer>
  </div>
</template>
...

📷 效果图

效果图1

🔠 属性

属性名	类型	默认值	说明
disabled	Boolean	false	点击本组件是否有效
action	String	-	上传文件的后端服务地址
fileName	String	"file"	文件对象对应的表单字段名
limit	Number	Infinity	同一批次上传的文件个数限制
minSize	Number	0	文件尺寸的最小限制
maxSize	Number	Infinity	文件尺寸的最大限制
accept	String	-	可接受的文件 MIME 类型
autoUpload	Boolean	true	是否选好文件后就自动上传
headers	Object	{}	设置上传的请求头部
extraData	Object	{}	上传时附带的额外参数

🛠️ 方法

方法名	参数	说明
Upload	_	触发上传动作。当属性 autoUpload 为 false 时，需要调用本方法触发上传
ClearFiles	-	清空选择的所有文件。其中一个作用是，调用本方法后，即使再次弹窗时选择同一文件， onChange 事件也会触发
SetFiles	浏览器内置 File 类型的对象数组	手动设置需要上传的文件列表

🎣 钩子属性

函数名	参数	说明
beforeSelectFile	-	选择文件之前的钩子，返回 false 将不再弹窗选择文件
beforeUploadAll	files	上传所有文件之前的钩子，返回 false 将会中止所有文件上传
beforeUpload	file, files	上传单个文件之前的钩子，返回 false 将会中止单个文件上传；如果返回对象则对象本身会追加到 extraData 中
onExceedLimit	files	超过上传文件的个数限制时的钩子
onExceedMinSize	files	某个文件尺寸小于文件最小限制时的钩子
onExceedMaxSize	files	某个文件尺寸大于文件最大限制时的钩子
onChange	files	选择文件后的钩子
onBegin	file, cancel, extraData	开始上传单个文件时的钩子，后于 beforeUpload，文件必定会开始上传；参数 cancel 为函数，调用 cancel() 会中止上传
onProgress	file, {percent, total}, extraData	单个文件上传的进度钩子(上传过程中不断触发)
onSuccess	result, file, extraData	单个文件上传成功时的钩子
onError	err, file, extraData	单个文件上传错误时的钩子