Vuetify-upload-img NPM

vuetify-datetime

介绍

vuetify实现element的图片上传组件

下载引入使用

npm i vuetify-upload-img

import FileImg from 'vuetify-upload-img'
import "vuetify-upload-img/lib/vuefile.css";
Vue.use(FileImg)

<FileImg />

参数说明

    <FileImg :defaultFile="value" />
    // defaultFile默认展示文件可以是对象或者数组{file,name,url}

    <FileImg :width="80" :height="80"/>
    // 设置图片宽高

    <FileImg :showname="true" />
    // 是否展示图片名称

    <FileImg :showhover="true" />
    // 是否展示hover插槽

    <FileImg :showhoverbtn="true" />
    // 是否展示默认hover插槽-删除按钮和放大按钮 当设置自定义插槽是需设置showhoverbtn为false

    <FileImg :count="3" />
    // count限制上传图片数量

    <FileImg color="#ff00ff" />
    // color设置颜色

    <FileImg backgroundColor="#ff00ff" />
    // backgroundColor设置背景颜色

    <FileImg>

      <template v-slot:img-hover-slot="{file,index}">
        {{file.name}}
      </template>

      <template v-slot:img-slot="{file,index}">
        {{file.name}}
      </template>

    </FileImg>
    // img-hover-slot插槽自定义hover内容
    // img-slot自定义内容

    // 其余v-file-input未定义属性可直接添加

    <FileImg 
      :size="8000"
      action="/api/v1/file/upload"
      :onPreview="onPreview"
      :handleRemove="handleRemove"
      :headers="{token:'11111'}"
      name="name"
      :data="{name:'文件'}"
    >
    // action  请求接口地址
    // onPreview  文件上传前函数
    // handleRemove  文件移除前函数
    // size  限制文件上传大小
    // headers  上传的headers
    // name  上传时的文件字段名
    // data  上传时附带的额外参数