vue-upload-utils v0.0.6

Vue-upload-utils

分片上传组件&上传工具 支持Vue2和Vue3

默认组件示例

内置默认上传组件

使用示例

安装

npm i vue-upload-utils

main.js

import 'vue-upload-utils/style.css'

vue：

<script setup>
import {reactive} from "vue";
import {Uploader} from "vue-upload-utils";
const fileList = reactive([]);
const op= {
  baseUrl: 'http://127.0.0.1:8080', // 上传服务地址
  taskFileList: fileList, // 上传文件列表
}
</script>
<template>
  <Uploader :auto-upload="true" :option="op" desc="支持扩展名: .rar .zip .doc .docx .pdf .jpg, 单个文件不超过10Mb。"/>
</template>

option参数格式

自定义组件示例

<script setup>
import {reactive, onMounted, watch} from "vue";
import {initUpload, uploadAllSubmit} from "vue-upload-utils";

const fileList = reactive([]);
const op = {
  baseUrl: 'http://127.0.0.1:8080', // 上传地址
  bindUploadDOMById: 'upBtn', // 绑定上传按钮的DOM元素ID
  taskFileList: fileList, // 上传文件列表
}
onMounted(() => {
  initUpload(op)
})
//监听 fileList
watch(fileList, (newVal, oldVal) => {
  console.log(newVal)
})

function uploadFile() {
  uploadAllSubmit()
}
</script>

<template>
  <div class="bt" id="upBtn">上传文件</div>
  <br/>
  <table>
    <thead>
    <tr>
      <th>序号</th>
      <th>文件名</th>
      <th>文件大小</th>
      <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(file, index) in fileList" :key="file.id">
      <td>{{ index }}</td>
      <td>{{ file.filename }}</td>
      <td>{{ file.fileSize }}</td>
      <td>{{ file.statusText }}</td>
    </tr>
    </tbody>
  </table>
  <button v-show="fileList.length > 0" style="padding: 2px;border: 1px solid #ccc;" @click="uploadFile">开始上传
  </button>
</template>

<style scoped>
.bt {
  border: 1px solid #ccc;
  padding: 0.75rem;
  margin-bottom: 1rem;
}
</style>

后端服务

可以参考下面后端服务来测试。

github:https://github.com/W-Lightr/fileUpload