dcqcComponent

Appearance

DFileUpload 文件上传组件 ​

说明 ​

DFileUpload 是一个用于文件上传的便捷式开发组件，它基于Element Plus组件库开发，支持文件映射回显，文件格式，大小校验，拖拽上传，手动点击上传等功能。

基础用法 ​

常用表单自动上传文件用法，自定义文件名回显。

Show Code
vue
<template>
  <DFileUpload
     :file-list="fileList"
     :limit-num="3"
     :upload-url="uploadUrl"
     :file-mapping="fileMapping"
     @upload-remove="handleUploadRemove"
     @upload-success="handleUploadSuccess"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DFileUpload from '@/components/DFileUpload.vue';
const uploadUrl = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15');
const fileList = ref([
  {
    fileName: 'element-plus-logo.xlsx',
    fileUrl: 'https://element-plus.org/images/element-plus-logo.xlsx',
  }
])
const fileMapping = ref({
  name:"fileName",
  url:"fileUrl"
})

handleUploadRemove(file,list){
  // 处理文件删除 示例：文件名为fileName，fileUrl
  fileList.value = list.map(i => {
    return {
      fileName: i.response.data.name,
      fileUrl: i.response.data.url,
    }
  })
};

handleUploadSuccess(file, list){ 
  //处理文件上传成功 示例：文件名为fileName，fileUrl
  fileList.value.push({
    fileName:response.data.name,
    fileUrl:response.data.url,
  })  
};

</script>
<template>
  <DFileUpload
     :file-list="fileList"
     :limit-num="3"
     :upload-url="uploadUrl"
     :file-mapping="fileMapping"
     @upload-remove="handleUploadRemove"
     @upload-success="handleUploadSuccess"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DFileUpload from '@/components/DFileUpload.vue';
const uploadUrl = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15');
const fileList = ref([
  {
    fileName: 'element-plus-logo.xlsx',
    fileUrl: 'https://element-plus.org/images/element-plus-logo.xlsx',
  }
])
const fileMapping = ref({
  name:"fileName",
  url:"fileUrl"
})

handleUploadRemove(file,list){
  // 处理文件删除 示例：文件名为fileName，fileUrl
  fileList.value = list.map(i => {
    return {
      fileName: i.response.data.name,
      fileUrl: i.response.data.url,
    }
  })
};

handleUploadSuccess(file, list){ 
  //处理文件上传成功 示例：文件名为fileName，fileUrl
  fileList.value.push({
    fileName:response.data.name,
    fileUrl:response.data.url,
  })  
};

</script>

拖拽上传 ​

文件拖拽自动上传,自定义文件类型,文件大小,文件数量。

Show Code
vue
<template>
  <DFileUpload
     :is-drag="true"
     :limit-num="5"
     :file-size="10"
     file-types=".png,.jpg"
     :file-list="fileList"
     :upload-url="uploadUrl"
     @upload-change="uploadChange"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DFileUpload from '@/components/DFileUpload.vue';
const fileList = ref([]);
const uploadUrl = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15');

const handleUploadError = (error) => {
  // 处理文件上传失败
};

const handleUploadSuccess = (file, list) => {
  // 处理文件上传成功
};
</script>
<template>
  <DFileUpload
     :is-drag="true"
     :limit-num="5"
     :file-size="10"
     file-types=".png,.jpg"
     :file-list="fileList"
     :upload-url="uploadUrl"
     @upload-change="uploadChange"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DFileUpload from '@/components/DFileUpload.vue';
const fileList = ref([]);
const uploadUrl = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15');

const handleUploadError = (error) => {
  // 处理文件上传失败
};

const handleUploadSuccess = (file, list) => {
  // 处理文件上传成功
};
</script>

手动点击上传 ​

手动提交上传,校验文件格式大小。

Show Code
vue
<template>
  <DFileUpload
      ref="uploadRefs"
     :upload-url="uploadUrl"
     :file-list="fileList"
     :autoUpload="false"
     :isTemplate="true"
     @download-file="downloadFile"
     @upload-change="uploadChange"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DFileUpload from '@/components/DFileUpload.vue';
const fileList = ref([]);
const uploadUrl = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15');

//文件上传更新
function uploadChange(file,list){
  fileList.value=list
}

//下载模板
function downloadFile(){
  console.log('下载模板')
}

//手动提交校验文件格式大小
function submitForm(){
  let flag=true
  fileList.value.forEach(item=>{
    if(!proxy.$refs.uploadRefs.uploadBefore(item)){
      flag=false
    }
  })
  if(!flag) return
  console.log('文件校验通过')
}
</script>
<template>
  <DFileUpload
      ref="uploadRefs"
     :upload-url="uploadUrl"
     :file-list="fileList"
     :autoUpload="false"
     :isTemplate="true"
     @download-file="downloadFile"
     @upload-change="uploadChange"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DFileUpload from '@/components/DFileUpload.vue';
const fileList = ref([]);
const uploadUrl = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15');

//文件上传更新
function uploadChange(file,list){
  fileList.value=list
}

//下载模板
function downloadFile(){
  console.log('下载模板')
}

//手动提交校验文件格式大小
function submitForm(){
  let flag=true
  fileList.value.forEach(item=>{
    if(!proxy.$refs.uploadRefs.uploadBefore(item)){
      flag=false
    }
  })
  if(!flag) return
  console.log('文件校验通过')
}
</script>

Attributes ​

参数说明类型默认值
fileTypes限制文件类型string.xls,.xlsx,.doc,.docx,.pdf,.zip
uploadUrl接口地址string--
templateText模板按钮文字string点击下载模板文件
btnText上传按钮文字string上传文件
isDrag是否拖拽Boolean否
autoUpload是否自动上传文件Boolean否
limitNum数量限制Number1
fileSize文件大小限制Number5
fileList文件列表，用于数据回显Array--
paramsData上传时附带的额外参数Object--
uploadHeaders设置上传的请求头部Object--
fileMapping文件属性名称映射，自定义类名方便回显Object"{name:'name',url:'url'}"
upload-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用Function--
upload-remove文件列表移除文件时的钩子Function--
upload-error文件上传失败时的钩子Function--
upload-success文件上传成功时的钩子Function--
download-file下载模板文件Function--

Released under the MIT License.

Copyright © 2023-present Evan You