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,
};
}