Vue.js拖放文件上传组件– Vue-Transmit

Vue.js拖放文件上传组件– Vue-Transmit
插件名称 vue-transmit
发布时间 2020年11月30日
插件作者 alexsasharegan

Vue-Transmit是基于Dropzone.js的轻量级Vue.js拖放上传器。

特征:

  • HTML 5文件上传
  • 发出上载生命周期事件(接受,发送,进度,成功等)
  • 图片缩略图预览
  • 支持并发上传
  • 完全用Vue.js编写-没有包装器组件
  • 范围内的插槽允许完全自定义样式
  • 使用带有模块的现代TypeScript / ES6编写

基本用法:

导入并安装Vue-Transmit组件。

import VueTransmit from "vue-transmit";
Vue.use(VueTransmit)

模板。

<template>
  <component :is="tag">
    <div class="v-transmit__upload-area"
         :class="[isDraggingClass, uploadAreaClasses]"
         draggable="true"
         v-bind="uploadAreaAttrs"
         v-on="uploadAreaListeners"
         @click="handleClickUploaderAction"
         @dragstart="handleDragStart"
         @dragend="handleDragEnd"
         @dragenter.prevent.stop="handleDragEnter"
         @dragover.prevent.stop="handleDragOver"
         @dragleave="handleDragLeave"
         @drop.prevent.stop="onDrop">
      <slot></slot>
    </div>
    <slot name="files"
          v-bind="fileSlotBindings"></slot>
    <input type="file"
           ref="hiddenFileInput"
           :multiple="multiple"
           :style="fileInputStyles"
           :class="[maxFilesReachedClass]"
           :accept="filesToAccept"
           :capture="capture"
           @change="onFileInputChange">
  </component :is="tag">
</template>

默认道具。

@Prop({ type: String, default: "div" })
tag: string
@Prop({ type: [Array, Object, String], default: null })
uploadAreaClasses: any[] | object | string
@Prop({ type: Object, default: objFactory })
uploadAreaAttrs: object
@Prop({ type: Object, default: objFactory })
uploadAreaListeners: object
@Prop({ type: String, default: null })
dragClass: string
@Prop({ type: String, required: true })
url: string
@Prop({ type: String, default: "post" })
method: string
@Prop({ type: Boolean, default: false })
withCredentials: boolean
// timeout in milliseconds
@Prop({ type: Number, default: 0 })
timeout: number
@Prop({ type: Number, default: 2 })
maxConcurrentUploads: number
// Whether to send multiple files in one request.
@Prop({ type: Boolean, default: false })
uploadMultiple: boolean
// in MB
@Prop({ type: Number, default: 256 })
maxFileSize: number
// The name of the file param that gets transferred.
@Prop({ type: String, default: "file" })
paramName: string
@Prop({ type: Boolean, default: true })
createImageThumbnails: boolean
// in MB. When the filename exceeds this limit, the thumbnail will not be generated.
@Prop({ type: Number, default: 10 })
maxThumbnailFileSize: number
@Prop({ type: Number, default: 120 })
thumbnailWidth: number
@Prop({ type: Number, default: 120 })
thumbnailHeight: number
/**
 * The base that is used to calculate the file size. You can change this to
 * 1024 if you would rather display kibibytes, mebibytes, etc...
 * 1024 is technically incorrect,
 * because `1024 bytes` are `1 kibibyte` not `1 kilobyte`.
 * You can change this to `1024` if you don't care about validity.
 */
@Prop({ type: Number, default: 1000 })
fileSizeBase: number
/**
 * Can be used to limit the maximum number of files that will be handled
 * by this Dropzone
 */
@Prop({ type: Number, default: null })
maxFiles: number
/**
 * Can be an object of additional parameters to transfer to the server.
 * This is the same as adding hidden input fields in the form element.
 */
@Prop({ type: Object, default: objFactory })
params: object
@Prop({ type: Object, default: objFactory })
headers: object
// If true, the dropzone will present a file selector when clicked.
@Prop({ type: Boolean, default: true })
clickable: boolean
// Whether hidden files in directories should be ignored.
@Prop({ type: Boolean, default: true })
ignoreHiddenFiles: boolean
/**
 * You can set accepted mime types here.
 *
 * The default implementation of the `accept()` function will check this
 * property, and if the Dropzone is clickable this will be used as
 * `accept` attribute.
 *
 * This is a comma separated list of mime types or extensions. E.g.:
 * - audio/*,video/*,image/png,.pdf
 *
 * See https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept
 * for a reference.
 */
@Prop({ type: Array, default: () => [] })
acceptedFileTypes: string[]
/**
 * If false, files will be added to the queue but the queue will not be
 * processed automatically.
 * This can be useful if you need some additional user input before sending
 * files (or if you want want all files sent at once).
 * If you're ready to send the file simply call myDropzone.processQueue()
 */
@Prop({ type: Boolean, default: true })
autoProcessQueue: boolean
/**
 * If false, files added to the dropzone will not be queued by default.
 * You'll have to call `enqueueFile(file)` manually.
 */
@Prop({ type: Boolean, default: true })
autoQueue: boolean
/**
 * If null, no capture type will be specified
 * If camera, mobile devices will skip the file selection and choose camera
 * If microphone, mobile devices will skip the file selection and choose the microphone
 * If camcorder, mobile devices will skip the file selection and choose the camera in video mode
 * On apple devices multiple must be set to false.  AcceptedFiles may need to
 * be set to an appropriate mime type (e.g. "image/*", "audio/*", or "video/*").
 */
@Prop({ type: String, default: null })
capture: string
/**
 * Before the file is appended to the formData, the function _renameFilename is performed for file.name, file
 * which executes the function defined in renameFilename
 */
@Prop({ type: Function, default: identity })
renameFile: (name: string) => string
// If the file size is too big.
@Prop({ type: String, default: "File is too big ({{ fileSize }}MiB). Max file size: {{ maxFileSize }}MB." })
dictFileTooBig: string
// If the file doesn't match the file type.
@Prop({ type: String, default: "You can't upload files of this type." })
dictInvalidFileType: string
// If the server response was invalid.
@Prop({ type: String, default: "Server responded with {{ statusCode }} code." })
dictResponseError: string
/**
 * Displayed when the maxFiles have been exceeded
 * You can use {{maxFiles}} here, which will be replaced by the option.
 */
@Prop({ type: String, default: "You can not upload any more files." })
dictMaxFilesExceeded: string
/**
 * If `done()` is called without argument the file is accepted
 * If you call it with an error message, the file is rejected
 * (This allows for asynchronous validation).
 */
@Prop({ type: Function, default: (_, done: Function) => done() })
accept: (file: VTransmitFile, done: Function) => void
@Prop({ type: Function, default: resizeImg })
resize: (file: VTransmitFile, dims: IDimensions) => IDrawImageArgs