commit
This commit is contained in:
@@ -1,190 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-uploader
|
||||
v-model="fileList"
|
||||
:before-read="beforeRead"
|
||||
:after-read="afterRead"
|
||||
multiple
|
||||
progress
|
||||
:accept="accept"
|
||||
:max-count="upload_number"
|
||||
title=""
|
||||
description=""
|
||||
tip=""
|
||||
></van-uploader>
|
||||
</div>
|
||||
<div>
|
||||
<van-uploader
|
||||
v-model="fileList"
|
||||
:before-read="beforeRead"
|
||||
:after-read="afterRead"
|
||||
multiple
|
||||
progress
|
||||
:accept="accept"
|
||||
:max-count="upload_number"
|
||||
title=""
|
||||
description=""
|
||||
tip=""
|
||||
></van-uploader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "h5Index",
|
||||
props: {
|
||||
// 上传返回id
|
||||
upload_return_id_api: {
|
||||
type: String,
|
||||
default: "/platform/sys/file/uploadLocalReturnId",
|
||||
required: false
|
||||
},
|
||||
// 上传返回url
|
||||
upload_dynamic_return_url_api: {
|
||||
type: String,
|
||||
default: "/platform/sys/file/uploadDynamicReturnUrl",
|
||||
required: false
|
||||
},
|
||||
// 当上传接口为id的情况下，配置下载接口
|
||||
upload_id_download_url: {
|
||||
type: String,
|
||||
default: "/platform/sys/file/download?id=",
|
||||
required: false
|
||||
},
|
||||
// 上传样式或图片方式 file || drag || image
|
||||
upload_mode: {
|
||||
type: String,
|
||||
default: "file",
|
||||
required: false
|
||||
},
|
||||
// 上传数量
|
||||
upload_number: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
required: false
|
||||
},
|
||||
// 上传返回id或url
|
||||
upload_result_type: {
|
||||
type: String,
|
||||
default: "url",
|
||||
required: false
|
||||
},
|
||||
// 上传返回分类 数组或字符串逗号隔离 interval | array
|
||||
upload_result_category: {
|
||||
type: String,
|
||||
default: "interval",
|
||||
required: false
|
||||
},
|
||||
// 跟antdv官方一样，是否显示文件列表
|
||||
show_upload_list: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false
|
||||
},
|
||||
// 跟antdv官方一样，接受上传的文件类型
|
||||
accept: {
|
||||
type: String,
|
||||
default: "",
|
||||
required: false
|
||||
},
|
||||
// 是否是完整的结果（就是文件上传返回什么，该组件返回什么，uploadResultCategory必须为array）
|
||||
complete_result: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
// 父组件传来的参数
|
||||
value: {
|
||||
type: [String, Array],
|
||||
required: false
|
||||
}
|
||||
name: "h5Index",
|
||||
props: {
|
||||
// 上传返回id
|
||||
upload_return_id_api: {
|
||||
type: String,
|
||||
default: "/platform/sys/file/uploadLocalReturnId",
|
||||
required: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [
|
||||
// { url: "http://localhost:8080/platform/sys/file/download?id=rn1v1efh2ag0aps59ult3ebudf", isImage: true }
|
||||
]
|
||||
}
|
||||
// 上传返回url
|
||||
upload_dynamic_return_url_api: {
|
||||
type: String,
|
||||
default: "/platform/sys/file/uploadDynamicReturnUrl",
|
||||
required: false
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
if (Array.isArray(val)) {
|
||||
this.fileList = val.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
status: null,
|
||||
isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(v.name.split(".").pop().toLowerCase())
|
||||
}
|
||||
})
|
||||
} else {
|
||||
val = JSON.parse(val)
|
||||
this.fileList = val.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
url: v.url ? v.url : v.response?.data,
|
||||
isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(v.name.split(".").pop().toLowerCase()),
|
||||
status: null
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.fileList = []
|
||||
}
|
||||
console.log(this.fileList)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
// 当上传接口为id的情况下，配置下载接口
|
||||
upload_id_download_url: {
|
||||
type: String,
|
||||
default: "/platform/sys/file/download?id=",
|
||||
required: false
|
||||
},
|
||||
computed: {
|
||||
action() {
|
||||
return this.upload_result_type === "id" ? this.upload_return_id_api : this.upload_dynamic_return_url_api
|
||||
}
|
||||
// 上传样式或图片方式 file || drag || image
|
||||
upload_mode: {
|
||||
type: String,
|
||||
default: "file",
|
||||
required: false
|
||||
},
|
||||
methods: {
|
||||
beforeRead(file) {
|
||||
return true
|
||||
},
|
||||
afterRead(files) {
|
||||
const uploadPromises = this.fileList
|
||||
.filter((f) => f.status === "loading")
|
||||
.map((f) => {
|
||||
const formData = new FormData()
|
||||
formData.append("file", f.file)
|
||||
return this.$axios.post(this.action, formData).then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
console.log(resp)
|
||||
f.name = f.file.name
|
||||
f.size = f.file.size
|
||||
f.status = null
|
||||
f.url = resp.data
|
||||
f.response = resp
|
||||
f.percentage = 100
|
||||
f.isImage = true
|
||||
delete f.file
|
||||
delete f.content
|
||||
console.log(f)
|
||||
} else {
|
||||
f.status = "fail"
|
||||
}
|
||||
})
|
||||
// 上传数量
|
||||
upload_number: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
required: false
|
||||
},
|
||||
// 上传返回id或url
|
||||
upload_result_type: {
|
||||
type: String,
|
||||
default: "url",
|
||||
required: false
|
||||
},
|
||||
// 上传返回分类 数组或字符串逗号隔离 interval | array
|
||||
upload_result_category: {
|
||||
type: String,
|
||||
default: "interval",
|
||||
required: false
|
||||
},
|
||||
// 跟antdv官方一样，是否显示文件列表
|
||||
show_upload_list: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false
|
||||
},
|
||||
// 跟antdv官方一样，接受上传的文件类型
|
||||
accept: {
|
||||
type: String,
|
||||
default: "",
|
||||
required: false
|
||||
},
|
||||
// 是否是完整的结果（就是文件上传返回什么，该组件返回什么，uploadResultCategory必须为array）
|
||||
complete_result: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
// 父组件传来的参数
|
||||
value: {
|
||||
type: [String, Array],
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: [
|
||||
// { url: "http://localhost:8080/platform/sys/file/download?id=rn1v1efh2ag0aps59ult3ebudf", isImage: true }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
if (Array.isArray(val)) {
|
||||
this.fileList = val.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
status: null,
|
||||
isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(v.name.split(".").pop().toLowerCase())
|
||||
}
|
||||
})
|
||||
} else {
|
||||
val = JSON.parse(val)
|
||||
this.fileList = val.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
url: v.url ? v.url : v.response?.data,
|
||||
isImage: ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(v.name.split(".").pop().toLowerCase()),
|
||||
status: null
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.fileList = []
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
action() {
|
||||
return this.upload_result_type === "id" ? this.upload_return_id_api : this.upload_dynamic_return_url_api
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeRead(file) {
|
||||
return true
|
||||
},
|
||||
afterRead(files) {
|
||||
this.fileList.map((f) => {
|
||||
if (f.file && f.file.name === files.file.name ) {
|
||||
f.status = "loading"
|
||||
}
|
||||
})
|
||||
const uploadPromises = this.fileList
|
||||
.filter((f) => f.status === "loading")
|
||||
.map((f) => {
|
||||
const formData = new FormData()
|
||||
formData.append("file", f.file)
|
||||
return this.$axios.post(this.action, formData).then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
f.name = f.file.name
|
||||
f.size = f.file.size
|
||||
f.status = null
|
||||
f.url = resp.data
|
||||
f.response = resp
|
||||
f.percentage = 100
|
||||
f.isImage = true
|
||||
delete f.file
|
||||
delete f.content
|
||||
} else {
|
||||
f.status = "fail"
|
||||
}
|
||||
})
|
||||
})
|
||||
Promise.all(uploadPromises)
|
||||
.then(() => {
|
||||
if (this.upload_result_category === "interval") {
|
||||
} else if (this.upload_result_category === "array") {
|
||||
if (this.complete_result) {
|
||||
this.$emit("update:value", this.fileList)
|
||||
} else {
|
||||
const resultArrayValue = []
|
||||
this.fileList.forEach((data) => {
|
||||
resultArrayValue.push(data.response.data)
|
||||
})
|
||||
Promise.all(uploadPromises)
|
||||
.then(() => {
|
||||
if (this.upload_result_category === "interval") {
|
||||
} else if (this.upload_result_category === "array") {
|
||||
if (this.complete_result) {
|
||||
this.$emit("update:value", this.fileList)
|
||||
} else {
|
||||
const resultArrayValue = []
|
||||
this.fileList.forEach((data) => {
|
||||
resultArrayValue.push(data.response.data)
|
||||
})
|
||||
this.$emit("update:value", resultArrayValue)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("所有上传请求失败:", error)
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
this.$emit("update:value", resultArrayValue)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("所有上传请求失败:", error)
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.van-uploader__title {
|
||||
padding-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.van-uploader__wrapper {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user