-
+
+
将文件拖放到此处以上传
- 选择文件
- 选择图片
- 选择文件夹
+
+
+
+
+
+
-
-
+
@@ -42,19 +35,34 @@
import { mapGetters } from 'vuex'
import axios from 'axios'
import SparkMD5 from 'spark-md5'
+import { getToken } from '@/utils/auth'
+// import { archivesUpload } from '@/utils/upload'
+import { getCurrentTime } from '@/utils/index'
export default {
+ props: {
+ selectedCategory: {
+ type: Object,
+ default: function() {
+ return {}
+ }
+ },
+ arcId: {
+ type: String,
+ default: function() {
+ return ''
+ }
+ }
+ },
data() {
return {
- files: [], // 选中的文件列表
- uploading: false, // 是否正在上传
- percent: 0, // 上传进度
- uploadUrl: this.baseApi + '/api/collect/uploadFiles', // 上传地址
skip: false,
options: {
- target: this.baseApi + '/api/file/upload',
+ target: 'http://192.168.99.67:11100/api/collect/upload',
// 开启服务端分片校验功能
testChunks: true,
+ // 真正上传的时候使用的 HTTP 方法,默认 POST
+ uploadMethod: 'post',
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
return parsedTimeRemaining
.replace(/\syears?/, '年')
@@ -71,22 +79,21 @@ export default {
return true
}
return (result.data.uploaded || []).indexOf(chunk.offset + 1) >= 0
+ },
+ headers: {
+ 'Authorization': getToken()
}
- // headers: {
- // // 在header中添加的验证，请根据实际业务来
- // "Access-Token": storage.get(ACCESS_TOKEN),
- // },
},
attrs: {
accept: 'image/*'
},
- statusText: {
+ // 修改上传状态
+ fileStatusTextObj: {
success: '上传成功',
- error: '上传出错了',
- uploading: '上传中...',
- paused: '暂停中...',
- waiting: '等待中...',
- cmd5: '计算文件MD5中...'
+ error: '上传错误',
+ uploading: '正在上传',
+ paused: '停止上传',
+ waiting: '等待中'
},
fileList: [],
disabled: true
@@ -98,211 +105,231 @@ export default {
])
},
methods: {
- // 切片上传
- async upload(file) {
- const chunkSize = 1024 * 1024 // 每个块的大小为 1MB
- const fileSize = file.size // 文件大小
- const chunks = Math.ceil(fileSize / chunkSize) // 总块数
- const tasks = [] // 上传任务数组
- let uploaded = 0 // 已上传块数
-
- // 文件切割
- for (let i = 0; i < chunks; i++) {
- const start = i * chunkSize
- const end = Math.min(start + chunkSize, fileSize)
+ fileStatusText(status, response) {
+ if (status === 'md5') {
+ return '校验MD5'
+ } else {
+ return this.fileStatusTextObj[status]
+ }
+ },
+ fileSuccess(rootFile, file, response, chunk) {
+ this.nowDate = getCurrentTime()
+ console.log(this.fileList)
+ const testList = []
+ const promiseArray = this.fileList.map(async(item, index) => {
+ testList.push(item.file)
+ const json = {}
+ if (item.file.type.substring(0, item.file.type.indexOf('/')) === 'image') {
+ const fileBase64 = await this.getBase64(item)
+ const imgRes = await this.getImgPx(fileBase64)
+ item.file.px = imgRes.width + 'px*' + imgRes.height + 'px'
+ } else {
+ item.file.px = ''
+ }
+ json.file_name = item.file.name
+ json.file_size = item.file.size
+ json.file_type = item.file.name.substring(item.name.lastIndexOf('.') + 1, item.file.name.length)
+ // json.file_path = res.data.data
+ json.file_path = ''
+ json.sequence = null
+ json.archive_id = this.arcId
+ json.file_dpi = item.file.px
+ json.file_thumbnail = ''
+ json.create_time = this.nowDate
+ json.id = null
+ return json
+ })
+ const result = JSON.parse(response)
- tasks.push(
- new Promise((resolve, reject) => {
- const formData = new FormData()
- formData.append('chunk_index', i) // 块编号
- formData.append('chunk_count', chunks) // 总块数
- formData.append('file_id', file.id) // 文件ID
- formData.append('chunk_data', file.slice(start, end)) // 块数据
+ console.log(result)
+ console.log(result.data)
+ console.log(result.data.needMerge)
+ console.log(this.skip)
- axios
- .post(this.uploadUrl, formData) // 上传块数据
- .then(res => {
- uploaded++
- this.percent = Math.floor((uploaded / chunks) * 100)
- console.log(this.percent)
- resolve()
- })
- .catch(err => {
- reject(err)
- })
+ Promise.all(promiseArray)
+ .then((arrayUpload) => {
+ const fileInfo = {
+ categoryId: this.selectedCategory.id,
+ archivesId: this.arcId,
+ identifier: file.uniqueIdentifier,
+ filename: file.name,
+ totalChunks: chunk.offset,
+ totalSize: file.size,
+ fileJsonString: JSON.stringify(arrayUpload)
+ }
+ console.log('arrayUpload', arrayUpload)
+ axios.post('http://192.168.99.67:11100/api/collect/merge ', fileInfo, {
+ headers: {
+ 'Authorization': getToken()
+ }
+ }).then((res) => {
+ console.log(res)
+ if (res.data.code === 200) {
+ console.log('上传成功')
+ } else {
+ console.log(res)
+ }
+ }).catch(function(error) {
+ console.log(error)
})
- )
- }
-
- // 待所有块上传完成后，发送合并请求
- await Promise.all(tasks)
- const res = await axios.post(this.uploadUrl, { file_id: file.id, chunks })
+ })
+ .catch((error) => {
+ console.error(error)
+ })
- // 上传成功，返回文件URL
- if (res.status === 200) {
- return `${this.uploadUrl}/${file.id}`
- } else {
- throw new Error(res.data.message)
+ // 是否需要合并
+ // if (result.data.needMerge && !this.skip) {
+ // axios.post('http://192.168.99.67:11100/api/collect/merge ', fileInfo, {
+ // headers: {
+ // 'Authorization': getToken()
+ // }
+ // }).then((res) => {
+ // if (res.code === 200) {
+ // console.log('上传成功')
+ // } else {
+ // console.log(res)
+ // }
+ // }).catch(function(error) {
+ // console.log(error)
+ // })
+ // } else {
+ // console.log('上传成功，不需要合并')
+ // }
+ if (this.skip) {
+ this.skip = false
}
},
- handleChange(files) {
- this.files = files
+ onFileError(rootFile, file, message, chunk) {
+ console.log('上传出错：' + message)
},
- async handleUpload() {
- console.log('handleUpload')
- try {
- console.log('handleUpload2')
- this.uploading = true
- console.log(this.files)
- const url = await this.upload(this.files)
- // 文件上传成功，将url展示给用户
- this.$message.success(`文件${this.files.name}上传成功！URL：${url}`)
- // for (let i = 0; i < this.files.length; i++) {
- // const file = this.files[i]
- // console.log('file', file)
-
- // }
- } catch (err) {
- console.log('handleUpload3')
- this.$message.error(`文件上传失败！${err.message}`)
- } finally {
- console.log('handleUpload4')
- this.uploading = false
- }
+ // 文件进度的回调
+ onFileProgress(rootFile, file, chunk) {
+ console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
},
- handleBeforeUpload() {
- // TODO: 检查文件大小、类型等
+ filesAdded(file, fileList, event) {
+ file.forEach((e) => {
+ this.fileList.push(e)
+ this.computeMD5(e)
+ })
},
- handleProgress(event, file) {
- // 显示上传进度
- this.percent = Math.floor((event.loaded / event.total) * 100)
- }
- },
+ computeMD5(file) {
+ const maxMessage = '上传文件大小不能超过 10GB!'
+ const maxSize = 10 * 1024 * 1024 * 1024
+ if (file && file.size > maxSize) {
+ this.$message.warning(maxMessage)
+ return false
+ }
- fileSuccess(rootFile, file, response, chunk) {
- const result = JSON.parse(response)
- const fileInfo = {
- identifier: file.uniqueIdentifier,
- filename: file.name,
- totalChunks: chunk.offset,
- totalSize: file.size
- }
- // 是否需要合并
- if (result.data.needMerge && !this.skip) {
- axios.post(this.baseApi + '/api/file/merge', fileInfo).then((res) => {
- if (res.code === 200) {
- console.log('上传成功')
- } else {
- console.log(res)
- }
- }).catch(function(error) {
- console.log(error)
- })
- } else {
- console.log('上传成功，不需要合并')
- }
- if (this.skip) {
- this.skip = false
- }
- },
- fileComplete(rootFile) {
- },
- complete() {
- },
- filesAdded(file, fileList, event) {
- file.forEach((e) => {
- this.fileList.push(e)
- this.computeMD5(e)
- })
- },
- computeMD5(file) {
- const fileReader = new FileReader()
- const time = new Date().getTime()
- const blobSlice =
+ const fileReader = new FileReader()
+ const time = new Date().getTime()
+ const blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice
- let currentChunk = 0
- // 文件分片大小
- const chunkSize = 5 * 1024 * 1024
- const chunks = Math.ceil(file.size / chunkSize)
- const spark = new SparkMD5.ArrayBuffer()
- // 文件状态设为"计算MD5"
- file.cmd5 = true // 文件状态为“计算md5...”
- file.pause()
- loadNext()
- fileReader.onload = (e) => {
- spark.append(e.target.result)
- if (currentChunk < chunks) {
- currentChunk++
- loadNext()
- // 实时展示MD5的计算进度
- console.log(
- `第${currentChunk}分片解析完成, 开始第${
- currentChunk + 1
- } / ${chunks}分片解析`
- )
- } else {
- const md5 = spark.end()
- console.log(
- `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
- file.size
- } 用时：${new Date().getTime() - time} ms`
- )
- spark.destroy() // 释放缓存
- file.uniqueIdentifier = md5 // 将文件md5赋值给文件唯一标识
- file.cmd5 = false // 取消计算md5状态
- file.resume() // 开始上传
+ let currentChunk = 0
+ // 文件分片大小
+ const chunkSize = 10 * 1024 * 1024
+ const chunks = Math.ceil(file.size / chunkSize)
+ const spark = new SparkMD5.ArrayBuffer()
+ // 文件状态设为"计算MD5"
+ file.cmd5 = true
+ file.pause()
+ loadNext()
+ fileReader.onload = (e) => {
+ spark.append(e.target.result)
+ if (currentChunk < chunks) {
+ currentChunk++
+ loadNext()
+ // 实时展示MD5的计算进度
+ console.log(
+ `第${currentChunk}分片解析完成, 开始第${
+ currentChunk + 1
+ } / ${chunks}分片解析`
+ )
+ } else {
+ const md5 = spark.end()
+ console.log(
+ `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
+ file.size
+ } 用时：${new Date().getTime() - time} ms`
+ )
+ spark.destroy() // 释放缓存
+ file.uniqueIdentifier = md5 // 将文件md5赋值给文件唯一标识
+ file.cmd5 = false // 取消计算md5状态
+ file.resume() // 开始上传
+ }
}
- }
- fileReader.onerror = function() {
- this.error(`文件${file.name}读取出错，请检查该文件`)
- file.cancel()
- }
-
- function loadNext() {
- const start = currentChunk * chunkSize
- const end =
- start + chunkSize >= file.size ? file.size : start + chunkSize
- fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
- }
- },
- allStart() {
- console.log(this.fileList)
- this.fileList.map((e) => {
- if (e.paused) {
- e.resume()
+ fileReader.onerror = function() {
+ this.error(`文件${file.name}读取出错，请检查该文件`)
+ file.cancel()
}
- })
- },
- allStop() {
- console.log(this.fileList)
- this.fileList.map((e) => {
- if (!e.paused) {
- e.pause()
+ function loadNext() {
+ const start = currentChunk * chunkSize
+ const end = start + chunkSize >= file.size ? file.size : start + chunkSize
+ fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
}
- })
- },
- allRemove() {
- this.fileList.map((e) => {
- e.cancel()
- })
- this.fileList = []
+ },
+ allStart() {
+ console.log(this.fileList)
+ this.fileList.map((e) => {
+ if (e.paused) {
+ e.resume()
+ }
+ })
+ },
+ allStop() {
+ console.log(this.fileList)
+ this.fileList.map((e) => {
+ if (!e.paused) {
+ e.pause()
+ }
+ })
+ },
+ allRemove() {
+ this.fileList.map((e) => {
+ e.cancel()
+ })
+ this.fileList = []
+ }
}
}
diff --git a/src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload2.vue b/src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload2.vue
index 3e48d8c..c5256e2 100644
--- a/src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload2.vue
+++ b/src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload2.vue
@@ -23,6 +23,7 @@
diff --git a/src/views/collectReorganizi/collectionLibrary/project/index.vue b/src/views/collectReorganizi/collectionLibrary/project/index.vue
index aaf4b34..d575921 100644
--- a/src/views/collectReorganizi/collectionLibrary/project/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/project/index.vue
@@ -126,7 +126,6 @@ export default {
this.$emit('myYearEvent', this.yearData)
},
openAnjuan(data, parentId) {
- // this.$emit('openAnjuan', '传值')
this.$emit('openAnjuan', data, parentId)
},
rowKey(row) {
@@ -134,7 +133,6 @@ export default {
},
// table选中加上选中状态
tableRowClassName({ row, rowIndex }) {
- // console.log('添加类名', row, rowIndex)
let color = ''
this.selections.forEach(item => {
if (item.id === row.id) {
diff --git a/src/views/prearchiveLibrary/module/moveFile.vue b/src/views/prearchiveLibrary/module/moveFile.vue
index e9604d9..1307238 100644
--- a/src/views/prearchiveLibrary/module/moveFile.vue
+++ b/src/views/prearchiveLibrary/module/moveFile.vue
@@ -32,7 +32,6 @@
lazy
:data="tableData"
style="width: 100%;"
- height="calc(100vh)"
:row-key="getRowKey"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
highlight-current-row