vxe-upload vue 实现附件上传、手动批量上传附件的方式

vxe-upload vue 实现附件上传、手动批量上传附件的方式

查看官网:https://vxeui.com

安装

复制代码
npm install vxe-pc-ui@4.6.47
javascript 复制代码
// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...

createApp(App).use(VxeUIAll).mount('#app')
// ...

上传附件支持失败重新上传

自定义重新上传,通过参数 show-error-status 启用,当上传失败时,可以点击重新上传按钮

html 复制代码
<template>
  <div>
    <vxe-upload v-model="fileList" multiple :limit-count="6" :limit-size="50" show-progress show-error-status auto-hidden-button :upload-method="uploadMethod"></vxe-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const fileList = ref([])

// 后端接口模拟请求失败
const uploadMethod = ({ file, updateProgress }) => {
  const formData = new FormData()
  formData.append('file', file)
  return axios.post('/api/pub/upload/single?randomError=1', formData, {
    onUploadProgress (progressEvent) {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))
      updateProgress(percentCompleted)
    }
  }).then((res) => {
    return {
      ...res.data
    }
  })
}
</script>

上传附件、手动批量上传

当需要手动批量提交上传时,可以通过 aotu-submit=false 关闭自动提交,然后手动调用 submit() 方法提交

html 复制代码
<template>
  <div>
    <vxe-button status="primary" @click="submitEvent">点击手动上传</vxe-button>

    <vxe-upload
      multiple
      show-progress
      v-model="fileList"
      ref="refUpload"
      button-text="选择文件或拖拽到此"
      :auto-submit="false"
      :limit-count="9"
      :limit-size="50"
      :upload-method="uploadMethod">
    </vxe-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const refUpload = ref()
const fileList = ref([])

const uploadMethod = ({ file, updateProgress }) => {
  const formData = new FormData()
  formData.append('file', file)
  return axios.post('/api/pub/upload/single', formData, {
    onUploadProgress (progressEvent) {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))
      updateProgress(percentCompleted)
    }
  }).then((res) => {
    return {
      ...res.data
    }
  })
}

const submitEvent = () => {
  const $upload = refUpload.value
  if ($upload) {
    $upload.submit()
  }
}
</script>

上传附件,可以单个点击上传、也可以批量上传

还可以通过 show-submit-button 显示上传按钮,单个提交或者手动提交单个。如果上传失败也可以通过 show-error-status 显示重新上传按钮

html 复制代码
<template>
  <div>
    <vxe-button status="primary" @click="submitEvent">点击手动上传</vxe-button>

    <vxe-upload
      multiple
      show-progress
      show-submit-button
      show-error-status
      v-model="fileList"
      ref="refUpload"
      button-text="选择文件或拖拽到此"
      :auto-submit="false"
      :limit-count="9"
      :limit-size="50"
      :upload-method="uploadMethod">
    </vxe-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const refUpload = ref()
const fileList = ref([])

const uploadMethod = ({ file, updateProgress }) => {
  const formData = new FormData()
  formData.append('file', file)
  return axios.post('/api/pub/upload/single?randomError=1', formData, {
    onUploadProgress (progressEvent) {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))
      updateProgress(percentCompleted)
    }
  }).then((res) => {
    return {
      ...res.data
    }
  })
}

const submitEvent = () => {
  const $upload = refUpload.value
  if ($upload) {
    $upload.submit(true)
  }
}
</script>

上传图片的详细用法看这里

相关推荐
OpenTiny社区1 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
武昌库里写JAVA3 小时前
「mysql」Mac osx彻底删除mysql
vue.js·spring boot·毕业设计·layui·课程设计
Rika3 小时前
手写mini-vue之后,我写了一份面试通关手册
前端·vue.js
咔咔一顿操作4 小时前
常见问题三
前端·javascript·vue.js·前端框架
wocwin7 小时前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
NicolasCage7 小时前
Icon图标库推荐
vue.js·react.js·icon
一道雷7 小时前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Ares-Wang7 小时前
Vue》》@ 用法
前端·javascript·vue.js
张志鹏PHP全栈9 小时前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js