vue-upload-drag
v1.5.0
Published
A Drag upload component project
Downloads
90
Maintainers
Readme
Requirements
- Vue: ^1.0.0 or ^2.0.0
- 支持图片上传,图片拖拽,自定义图片上传
Install
From npm:
$ npm install vue-upload-drag -D
Usage
import VueUploadDrag from 'vue-upload-drag'
Vue.use(VueUploadDrag)
<!--your.vue-->
<template>
<upload-drag v-model="fileList" :config="config"/>
</template>
API
{onChange} Function
{onProgress} Function
{onError} Function
{onSuccess} Function 必须接受,并回调exChangeUrl方法
slot
具名插槽:loading,用于自定义loading,结合config.loading用
具名插槽:imgBtns,用于自定义imgBtns,结合config.imgBtns用
具名插槽:liItem,该插槽是在li元素根节点
Arguments:
{config} Object
export default {
name: 'uploadDrag',
props: {
value: {
required: true,
type: Array
},
config: {
required: false,
type: Object,
default: _ => ({
accept: "image/*", // 文件上传类型
action: "https://jsonplaceholder.typicode.com/posts/", // 上传域名
data: {}, // 请求参数
limit: 9, // 支持最大上传文件数
multiple: true, // 支持多个文件选择
imgUrl: "url", // 图片路径字段
deleteBtnName: "删除", // 删除按钮名
viewBtnName: "查看", // 查看按钮名
dragabled: true, // 是否拖拽
imgBtns: ["删除", "查看"], // 图片按钮显示集合,另可以通过具名插槽名imgBtns自定义
loading: true, // 图片加载loading是否开启,另可以通过具名插槽名Loading自定义
isHttpRequest: false, // 是否自定义请求
uploadField: "file", // 上传默认字段
})
}
}
}
Example
<template>
<upload-drag v-model="fileList" :config="config" @onChange="onChange" @onProgress="onProgress" @picsExceed="picsExceed" @onError="onError" @onSuccess="onSuccess"/>
</template>
import VueUploadDrag from 'vue-upload-drag'
Vue.use(VueUploadDrag)
export default {
data() {
return {
fileList: [
{
name: "food.jpg",
url: "https://www.baidu.com/img/bd_logo1.png",
id: 11
}
],
config: {
limit: 1
}
};
},
methods: {
onChange (f) { // 图片选择改变,且config中isHttpRequest为true
console.log(f)
},
onProgress ({ e, file, uid }) { // 上传中
console.log(e, file, uid)
},
onError ({ err, file, uid }) { // 上传失败,会自动把图片移除,建议给提示
alert('图片上传失败')
console.log(err, file, uid)
},
picsExceed ({uploadBefore, selectCount, files, value}) { // 同时选择多张图片超过限制数会被触发
alert('选择的图片数量超过最大数')
uploadBefore(files, value) // 过滤多余的图片继续上传
},
onSuccess ({res, file, _uid , exChangeUrl, handleRemove}) { // 上传成功,请必须接受onSuccess方法
console.log(res, file, _uid , exChangeUrl, handleRemove)
// 仅是举例而已哦
if (res.code === '0') { // 根据后端状态判断
const {url} = res.data
exChangeUrl(_uid, url); // url为后端返回的图片链接值,uid是onSuccess传入的
} else {
alert('图片上传失败')
handleRemove(_uid) // 删除图片
}
}
}
};