文件资源上传阿里云,包含大文件的切片上传和断点续传
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)