Vue-img-paste-upload NPM

vue-img-paste-upload(当前版本 V1.0.0)

一款高效、简洁、功能丰富、方便的图片上传插件

Vue 兼容版本

Vue2.x

浏览器功能兼容版本

点击上传（ie10+）

粘贴上传（非 ie 等浏览器高版本，目前支持微信等截图粘贴）

Install

	npm i vue-img-paste-upload -S

	//main.js
	import vipu from "vue-img-paste-upload";
	Vue.use(vipu)

	//页面使用
	<vue-img-paste-upload
      ref="vipu"
      :active="active"
      :file-list="fileList"
      :max="3"
      :on-delete="hanldeDelete"
      :on-upload="handleUpload"
      @view="handleView"
      @exceed="exceed"
      @after-upload="afterUpload"
    ></vue-img-paste-upload>
    <button type="button" @click="active = !active">
      {{ active ? "关闭" : "启动" }}粘贴功能
    </button>

    data: () => {
        return {
            active: false,
            fileList: []
        }
    }

ui 效果图

效果图

Attribute

属性	类型	说明	默认	是否必传
file-list	Array	文件数据	[]	FALSE
active	Boolean	是否开启粘贴图片功能	FALSE	FALSE
zoom	Boolean	是否显示放大图片按钮(若开启则点击执行 emit('view'))	TRUE	FALSE
readonly	Boolean	是否只读	FALSE	FALSE
multiple	Boolean	是否多选	FALSE	FALSE
max	Number	限制文件数量	1995	FALSE
accept	String	文件默认查询类型	.gif, .jpg, .jpeg, .png	FALSE
on-upload	Function	参数为上传的文件，若返回!=false 则直接删除；或者返回 Promise ,则 reslove 后添加，否则不执行删除		FALSE
on-delete	Function	参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止删除		FALSE

on-upload

若有此方法，可返回 true 或 promise 进行判断是否执行添加，若你执行了 http 请求，则可以返回一个 promise 对象，此时 resolve 后执行添加，同时你可携带你需要的参数，以 object 方式返回，注意，若你想标记此图片已经上传，请务必传 already:true;如下示例

// return {
      //   already: true,
      //   id: "xx",
      // };

	  return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            already: true,
            id: "xx",
          });
        }, 1000);
      });

回调函数

函数名	说明	返回值
view	zoom 属性设置 true 时点击放大按钮图标可执行查看当前图片	object，包括 file 对象及自定义参数
exceed	当文件超出限定时返回当前超出的文件对象	object，包括 file 对象及自定义参数，针对有 on-upload 异步上传的延时性以及 max 判断时机，虽然前端数据未展示，但是有可能文件已上传到服务器，所以可针对此返回数据进行调用后台接口删除，ps->不推荐文件变更时直接上传
after-upload	执行完添加后的回调	object，包括 file 对象及自定义参数
after-delete	执行完删除后的回调	object，包括 file 对象及自定义参数

API

函数名	说明	参数格式	调用示例
getNotUpload	返回当前以 already 进行标记未执行上传到服务器的文件，类型为 Array	无	this.$refs.vipu.getNotUpload()
setUpload	对当前 fileList 数据标记已上传，以 already 为标记	无	this.$refs.vipu.setUpload()

Other

1、后继会继续更新 vue3 版本

2、如果有其他问题邮件沟通1195669615@qq.com或者加 qq1195669615。若插件能够帮助到您，期待您的 star 哦！

3、欢迎加入 qq 交流群（目前正在起步中）

qq交流群

vue angular react upload file paste 文件上传插件图片上传图片粘贴上传插件 pc文件上传粘贴上传插件文件粘贴上传插件

vue

@everything-registry/sub-chunk-3083 @infinitebrahmanuniverse/nolb-vue-i

1.0.0

3 years ago