npm 包 abhi-uploader 使用教程

阅读时长 5 分钟读完

abhi-uploader 是一个轻便的前端上传工具,可以方便地实现文件上传功能。

安装

使用 npm 进行安装:

使用

实例化

在 JavaScript 中,可以通过以下代码来实例化 abhi-uploader:

其中,config 为配置信息。

配置

abhi-uploader 提供了以下配置选项:

url

  • 类型:string
  • 默认值:null

上传文件的地址,必填。

method

  • 类型:string
  • 默认值:POST

上传文件时使用的 HTTP 请求方法(GET 或 POST)。

fieldName

  • 类型:string
  • 默认值:file

上传文件的字段名。

headers

  • 类型:Object
  • 默认值:null

上传文件时发送的 HTTP 请求头。

data

  • 类型:Object
  • 默认值:null

上传文件时发送的额外数据。

fileSize

  • 类型:Number
  • 默认值:0

上传文件的最大尺寸,单位为字节。如果文件大小超出限制,则不进行上传。

extensions

  • 类型:Array
  • 默认值:[]

上传文件的允许扩展名列表。如果文件扩展名不在列表中,则不进行上传。

beforeSend

  • 类型:function(xhr, formData)
  • 默认值:null

在发送 HTTP 请求之前被调用的函数。可以用它来修改请求头或请求数据。

方法

upload

  • 作用:上传文件。
  • 用法:uploader.upload()

cancel

  • 作用:取消上传。
  • 用法:uploader.cancel()

onProgress

  • 作用:设置上传进度监听函数。
  • 用法:uploader.onProgress(callback)

onSuccess

  • 作用:设置上传成功处理函数。
  • 用法:uploader.onSuccess(callback)

onError

  • 作用:设置上传失败处理函数。
  • 用法:uploader.onError(callback)

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    -------------------- ------------
  -------
  ------
    ------ ----------- ------------
    ------- --------------------------
    ------- ----------------------------------------------------------------
    --------
      --- ------ - -
        ---- ----------
        ------- -------
        ---------- -------
        -------- -
          ---------------- ------- ----
        --
        ----- -
          ---------- -----
        --
        --------- ---- - ---- - --- -- -- --
        ----------- ------- ------- ------ ------
      --

      --- -------- - --- ---------------------
      -------------------------------------------------------------- ---------- -
        --- ---- - -------------------------------------------
        -- ------ -
          --------------------- -
            ----------- ---------------- ------ -
              ------------------- - ------ - --- - -------
            --
            ---------- ------------- -
              ------------------- - -----
            --
            -------- ------------- -
              --------------------- - -----
            -
          ---
        -
      ---
    ---------
  -------
-------

该示例代码演示了如何使用 abhi-uploader 实现文件上传功能。上传时会检查文件大小和扩展名是否符合要求,可以设置 HTTP 请求头和额外数据,以及监听上传进度和上传结果。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cd181e8991b448e6617

纠错
反馈