vue3 文件资源上传阿里云，包含大文件的切片上传和断点续传

本文链接：https://blog.csdn.net/dreamimport/article/details/131601837

本文介绍如何在Vue3应用中实现阿里云的文件资源上传功能，特别是针对大文件进行切片上传和断点续传的详细步骤和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件资源上传阿里云，包含大文件的切片上传和断点续传

vue3 upload

属性说明

属性名	类型	默认值	说明
options	Object	{}	属性

事件

事件名	类型	默认值	说明
@uploadSucess	Function	() => {}	文件上传成功
@uploadProcess	Function	() => {}	文件上传过程
@beforeUpload	Function	() => {}	文件上传前
@uploadError	Function	() => {}	文件上传失败

使用示例

<upload-file
    ref="uploadFileDom"
    :options="{
      multiple: true,
      accept,
      isAddSucaiFlag: true,
      uploadSize: '2gb',
      testNameLen: 90
    }"
    @uploadSucess="uploadSucess"
    @uploadProcess="uploadProcess"
    @beforeUpload="beforeUpload"
    @uploadError="uploadError"
  ></upload-file>
  <el-button @click='hanldeUpload'></el-button>

// setup 形式下
import { ref,reactive,shallowRef } from 'vue'
import uploadFile from "@/components/upload-v3/upload"
const uploadFileDom = ref("")
import { getAccept, strLength } from "@/components/upload-v3/index";
const accept = shallowRef(getAccept(2))

const beforeUpload = (fileList) => {
		uploadList.length = 0
		uploadList.push(...fileList)
	}
	const uploadProcess = (fileList, item) => {
		uploadList.forEach(ele => {
			if(ele.id === item.id) {
				ele.process = item.process
				ele.uploadId = item.uploadId
			}
		})
	}
	const uploadSucess = async (fileList, item, tag) => {
		if(searchRuleForm) {
			searchRuleForm.tag = tag
		}
		const index = uploadList.findIndex(ele => ele.id === item.id)
		uploadList.splice(index, 1)
		delete item.process
		tableData.unshift(item)
		if(fn) {
			fn(item)
		}
	}
	const uploadError = (item) => {
		uploadList.forEach(ele => {
			if(ele.id === item.id) {
				ele.type = 'error'
			}
		})
	}
	const cancelUpload = (row) => {
		if(row) {
			uploadFileDom.value.cancelUpload(row.id)
		} else {
			uploadFileDom.value.cancelUpload()
		}
	}
	const reloadUpload = (row) => {
		uploadFileDom.value.reloadFile(row)
	}
	const deleteUpload = (row) => {
		const index = uploadList.findIndex(ele => ele.id === row.id)
		uploadList.splice(index, 1)
		uploadFileDom.value.deleteUpload(row.id)
	}
	const hanldeUpload = () => {
		uploadFileDom.value.uploadFile()
	}
	const intercept = function (callback) {
		if(uploadList.length) {
			ElMessageBox.confirm('当前还有文件正在上传，当前操作会取消上传', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				callback: (action) => {
					if(action === 'confirm') {
						cancelUpload()
						uploadFileDom.value.deleteUpload()
						callback()
					}
				}
			})
		} else {
			callback()
		}
	}


//也可以注册到全局 页面中直接使用不需要import
// main.ts文件
import App from '@/App.vue'
import uploadFile from "@/components/upload-v3/upload"
const app = createApp(App)
app.component('upload-file', uploadFile)