NPM 包 Vue-Image-Crop-Uploader 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

Vue-Image-Crop-Uploader 是一个基于 Vue.js 的图片上传和剪裁组件。它提供了简单、可配置和易于使用的 API，可以很容易地将它添加到你的 Vue.js 应用程序中。Vue-Image-Crop-Uploader 使用了 cropperjs 作为图片剪裁工具，同时你可以使用 axios 来上传图片。

前置技术准备

Vue.js
cropperjs
axios

安装

使用 npm 安装：

npm install vue-image-crop-uploader --save

在你的 Vue.js 项目中引入：

import Vue from 'vue'
import VueImageCropUploader from 'vue-image-crop-uploader'
Vue.use(VueImageCropUploader)

使用

可以通过以下方式在你的项目中使用 Vue-Image-Crop-Uploader：

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

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

Props

Vue-Image-Crop-Uploader 提供了以下 Props：

`field-name`

类型: String
默认值: 'file'

设置要上传的文件的字段名称。

`file-size-limit`

类型: Number
默认值: 0

设置上传文件的大小限制（以 MB 为单位），如果设置为 0，则表示没有限制。

`crop-options`

类型: Object
默认值: {}

设置 cropperjs 的选项对象，用来调整图片剪裁的功能和样式。更多细节可以参考 cropperjs 的文档。

`upload-options`

类型: Object
默认值: {}

设置发送 POST 请求的选项参数，例如 url, method, headers 和 data 等等。更多细节可以参考 axios 的文档。

`allow-upload`

类型: Boolean
默认值: true

是否允许上传图片。如果设置为 false，则不会发送上传请求。

`auto-upload`

类型: Boolean
默认值: false

设置为 true 则会自动上传图片。

`multiple`

类型: Boolean
默认值: false

是否允许选择多个文件。

事件

Vue-Image-Crop-Uploader 提供了以下事件：

`upload-start`

在上传开始之前，将触发此事件，并且你可以在此事件中更新上传选项参数。

`upload-progress`

在上传期间将会不断触发该事件，你可以更新上传进度条的信息。

`upload-success`

当上传成功后，将会触发此事件，并且返回响应数据。

`upload-error`

如果上传过程中或者上传完成但有错误时，将会触发此事件。

Slots

你可以在 <vue-image-crop-uploader> 组件中使用以下插槽：

`default`

可以放置任何你想要在组件中显示的元素。

`crop-view`

用于显示截取出来的图片的容器，src 参数代表图片的 base64 字符串，可以使用这个字符串将图片显示到元素中。

<vue-image-crop-uploader>
  <template #crop-view="{ src }">
    <img :src="src" alt="crop view" class="image-view"/>
  </template>
</vue-image-crop-uploader>

`crop-toolbar`

用于向图片剪裁工具添加自定义按钮等元素。更多详情可以参考 cropperjs 的文档。

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

`drop-area`

用于自定义拖动文件到区域后显示的内容。

<vue-image-crop-uploader>
  <template #drop-area>
    <div class="drop-area">
      <p>将图片拖放至此处</p>
      <p>或点击上传</p>
    </div>
  </template>
</vue-image-crop-uploader>

结语

Vue-Image-Crop-Uploader 是一个非常方便和灵活的 Vue.js 组件。它提供了多种选项和自定义插槽，可以满足许多不同的需求。

如果你需要上传和剪裁图片的功能，并且使用的是 Vue.js，那么我建议给 Vue-Image-Crop-Uploader 一次尝试，相信你会喜欢它！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0b98