vue-upload-drag

1.5.0 • Public • Published

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) // 删除图片
          }
      }
  }
};

Package Sidebar

Install

npm i vue-upload-drag

Weekly Downloads

4

Version

1.5.0

License

ISC

Unpacked Size

2.01 MB

Total Files

4

Last publish

Collaborators

  • maple_hu