Package Exports

vue-handsontable-element

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-handsontable-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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