jhc-uploader

安装

npm i jhc-uploader

快速使用

import JhcUploader from 'jhc-uploader'
import 'jhc-uploader/dist/style.css'

const app = createApp(App)
app.use(JhcUploader, {
  UPLOAD_URL: 'http://localhost:12345/upload',    //upload url
  headers: () => {
    return {
      ['xxx']: 'hello'
    }
  }
})
app.mount('#app')

<template>
  <div class="app">
    <JhcUploader
      v-model="files"
      multiple
      :before-delete="onBeforeDelete"
    ></JhcUploader>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'

const files = ref([])

function onBeforeDelete(item, next) {
  if (item.id) {
    ElMessageBox.confirm(`是否删除${item.name}?`, '提示').then(() => {
      next()   
    })
  } else {
    next()
  }  
}

function getData() {
  setTimeout(() => {
    files.value.push({
      id: new Date().valueOf(),
      name: 'hello world.txt',
      size: 1024,
      url: 'xxx'
    })
  }, 2000)
}

onMounted(() => {
  getData()
})
</script>

属性

| 名称 | 说明 | 类型 | 默认值 | | - | - | - | - | | model-value / v-model | 绑定值 | Array | - | | disabled | 是否禁用 | Boolean | false | | item-classname | 设置列表项类名 | Function | - | | multiple | 是否多选 | Boolean | false | | accepts | 接受上传的文件类型 | Array | - | | thread | 上传任务数量 | Number | 3 | | maxSize | 单个文件的最大大小 | Number | 1024 * 1024 * 10 | | before-delete | 删除文件之前的钩子,调用next删除列表项 | Function | - |

依赖

vue@3 element-plus