draggable_upload

描述

基于vue3.0的可拖拽排序、拖拽上传的上传组件

安装

通过 npm 或者 yarn 安装

yarn add draggable_upload
//or
npm i draggable_upload

浏览器直接引入

    <script src="https://unpkg.com/vue@next"></script>
    <script src="path/draggableUpload.umd.min.js"></script>

属性

属性名	类型	默认值	必填	格式	说明
fileList	array	-	必填	[{ url:"",status:"success",//...其它自定义属性}]	上传数组 状态值为 loading 、 success 、 error
limit	number	1000	否	4	图片上传数量限制
input原生属性 multiple 、accept 等	-	-	否	-	除了props其它自定义属性直接作用于input元素上
uploadClass	string	-	否	-	上传input 类名
imgClass	string	-	否	-	图片类名
draggable	boolean	false	否	-	拖拽上传

事件

事件名	参数	说明
fileChange	file,fileList	选取文件回调
removeImg	index,item,fileList	移除图片回调
imgPreview	item	预览图片回调

插槽

命名插槽	命名	插槽prop
默认插槽	default	-
预览插槽	previewIcon	item
删除插槽	deleteIcon	index, item, fileList
加载状态插槽	progress	item
成功状态插槽	successIcon	item
失败状态插槽	errorIcon	item
拖拽样式插槽	dragIcon	-

example demo

使用

 <draggableUpload
      :limit="4"
      draggable
      multiple="multiple"
      accept=".jpg,.jpeg,.png"
      :fileList="fileList"
      @fileChange="handleFileChange"
      @removeImg="handleRemoveImg"
      @imgPreview="handleImgPreview"
    >
      <i class="iconfont add-icon icon-jiahao"></i>
    </draggableUpload>

import draggableUpload from "draggable_upload";
interface FileItem {
  status: "loading" | "success" | "error";
  url: string;
  [propName: string]: unknown;
}
interface File {
  name: string;
  type: string;
  [propName: string]: unknown;
}
//....
  setup() {
    const fileList = reactive([
      {
        status: "success",
        url: mockUrl,
      },
    ]);
    const handleFileChange = (file: File, fileList: FileItem[]) => {
      console.log("file fileList is", file, fileList);
      let index = fileList.length;
      fileList.push({
        url: "",
        status: "loading",
      });
      setTimeout(() => {
        if (index % 2 == 0) {
          fileList[index].url = "";
          fileList[index].status = "error";
        } else {
          fileList[index].url = mockUrl + Math.random();
          fileList[index].status = "success";
        }
      }, 1000);
    };
    const handleRemoveImg = (
      index: number,
      item: FileItem,
      fileList: FileItem[]
    ) => {
      fileList.splice(index, 1);
    };
    const handleImgPreview = (item: FileItem) => {
      console.log("preview", item.url);
    };
    return {
      fileList,
      handleFileChange,
      handleRemoveImg,
      handleImgPreview,
    };
  }