|
@@ -1,3 +1,9 @@
|
|
|
|
+<!--
|
|
|
|
+ * @Author: zhangyu
|
|
|
|
+ * @Date: 2019-11-28 10:05:28
|
|
|
|
+ * @Info:
|
|
|
|
+ * @LastEditTime: 2019-11-29 19:22:55
|
|
|
|
+ -->
|
|
<template>
|
|
<template>
|
|
<div id="global-uploader">
|
|
<div id="global-uploader">
|
|
|
|
|
|
@@ -53,22 +59,18 @@
|
|
* Bus.$on('fileSuccess', fn); 文件上传成功的回调
|
|
* Bus.$on('fileSuccess', fn); 文件上传成功的回调
|
|
*/
|
|
*/
|
|
|
|
|
|
-// import {ACCEPT_CONFIG} from './js/config';
|
|
|
|
-import Bus from '@/utils/bus.js'
|
|
|
|
|
|
+import Bus from '@/utils/bus.js';
|
|
import SparkMD5 from 'spark-md5';
|
|
import SparkMD5 from 'spark-md5';
|
|
-
|
|
|
|
-// 这两个是我自己项目中用的,请忽略
|
|
|
|
-// import {Ticket} from '@/assets/js/utils';
|
|
|
|
-// import api from '@/api';
|
|
|
|
|
|
+import { getUploadId, mergeMultipart } from '@/api/uploader';
|
|
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
options: {
|
|
options: {
|
|
- target: '',
|
|
|
|
- chunkSize: 2*1024*1024,
|
|
|
|
- fileParameterName: 'upfile',
|
|
|
|
- maxChunkRetries: 3,
|
|
|
|
|
|
+ target: '/image-service/common/multipart_upload',
|
|
|
|
+ chunkSize: 1*1024*1024,
|
|
|
|
+ fileParameterName: 'file',
|
|
|
|
+ maxChunkRetries: 5,
|
|
testChunks: false, //是否开启服务器分片校验
|
|
testChunks: false, //是否开启服务器分片校验
|
|
// 服务器分片校验函数,秒传及断点续传基础
|
|
// 服务器分片校验函数,秒传及断点续传基础
|
|
// checkChunkUploadedByResponse: function (chunk, message) {
|
|
// checkChunkUploadedByResponse: function (chunk, message) {
|
|
@@ -82,8 +84,7 @@ export default {
|
|
// headers: {
|
|
// headers: {
|
|
// Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
|
|
// Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
|
|
// },
|
|
// },
|
|
- method: 'octet',
|
|
|
|
- query() {}
|
|
|
|
|
|
+ query: this.getFileQuery
|
|
},
|
|
},
|
|
attrs: {
|
|
attrs: {
|
|
// accept: ACCEPT_CONFIG.getAll()
|
|
// accept: ACCEPT_CONFIG.getAll()
|
|
@@ -93,13 +94,35 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- Bus.$on('openUploader', query => {
|
|
|
|
- this.params = query || {};
|
|
|
|
-
|
|
|
|
- if (this.$refs.uploadBtn) {
|
|
|
|
- document.getElementById('global-uploader-btn').click();
|
|
|
|
- // $('#global-uploader-btn').click();
|
|
|
|
|
|
+ Bus.$on('openUploader', (query, file) => {
|
|
|
|
+ if(query.uploadId){
|
|
|
|
+ // this.params = query || {};
|
|
|
|
+ file.uploadId = query.uploadId
|
|
|
|
+ this.uploader.addFile(file)
|
|
|
|
+ } else {
|
|
|
|
+ getUploadId({
|
|
|
|
+ systemId: query.systemId?query.systemId:'revit',
|
|
|
|
+ secret: query.secret?query.secret:'63afbef6906c342b',
|
|
|
|
+ overwrite: query.overwrite? query.overwrite: false,
|
|
|
|
+ key: file.name
|
|
|
|
+ }, res => {
|
|
|
|
+ if(res.UploadId){
|
|
|
|
+ // this.params = Object.assign(query, { uploadId: res.UploadId }) || {};
|
|
|
|
+ file = Object.assign(file, {
|
|
|
|
+ ...query,
|
|
|
|
+ uploadId: res.UploadId
|
|
|
|
+ })
|
|
|
|
+ this.uploader.addFile(file)
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error(`请求分片上传接口失败!`);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ // if (this.$refs.uploadBtn) {
|
|
|
|
+ // document.getElementById('global-uploader-btn').click();
|
|
|
|
+ // // $('#global-uploader-btn').click();
|
|
|
|
+ // }
|
|
});
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -111,6 +134,7 @@ export default {
|
|
methods: {
|
|
methods: {
|
|
onFileAdded(file) {
|
|
onFileAdded(file) {
|
|
this.panelShow = true;
|
|
this.panelShow = true;
|
|
|
|
+ this.collapse = true;
|
|
this.computeMD5(file);
|
|
this.computeMD5(file);
|
|
|
|
|
|
Bus.$emit('fileAdded');
|
|
Bus.$emit('fileAdded');
|
|
@@ -122,28 +146,27 @@ export default {
|
|
let res = JSON.parse(response);
|
|
let res = JSON.parse(response);
|
|
|
|
|
|
// 服务器自定义的错误(即虽返回200,但是是错误的情况),这种错误是Uploader无法拦截的
|
|
// 服务器自定义的错误(即虽返回200,但是是错误的情况),这种错误是Uploader无法拦截的
|
|
- if (!res.result) {
|
|
|
|
- this.$message({ message: res.message, type: 'error' });
|
|
|
|
|
|
+ if (!res.Result || res.Result != 'success') {
|
|
|
|
+ this.$message({ message: res.ResultMsg?res.ResultMsg:'上传失败!', type: 'error' });
|
|
// 文件状态设为“失败”
|
|
// 文件状态设为“失败”
|
|
this.statusSet(file.id, 'failed');
|
|
this.statusSet(file.id, 'failed');
|
|
return
|
|
return
|
|
}
|
|
}
|
|
-
|
|
|
|
// 如果服务端返回需要合并
|
|
// 如果服务端返回需要合并
|
|
- if (res.needMerge) {
|
|
|
|
|
|
+ console.log('获取分片数',file.chunks.length)
|
|
|
|
+ if (parseInt(res.TotalCount) >= file.chunks.length) {
|
|
// 文件状态设为“合并中”
|
|
// 文件状态设为“合并中”
|
|
this.statusSet(file.id, 'merging');
|
|
this.statusSet(file.id, 'merging');
|
|
-
|
|
|
|
- api.mergeSimpleUpload({
|
|
|
|
- tempName: res.tempName,
|
|
|
|
- fileName: file.name,
|
|
|
|
- ...this.params,
|
|
|
|
- }).then(res => {
|
|
|
|
|
|
+ mergeMultipart({
|
|
|
|
+ systemId: file.file.systemId?file.file.systemId:'revit',
|
|
|
|
+ secret: file.file.secret?file.file.secret:'63afbef6906c342b',
|
|
|
|
+ uploadId: file.file.uploadId
|
|
|
|
+ }, res => {
|
|
// 文件合并成功
|
|
// 文件合并成功
|
|
Bus.$emit('fileSuccess');
|
|
Bus.$emit('fileSuccess');
|
|
|
|
|
|
this.statusRemove(file.id);
|
|
this.statusRemove(file.id);
|
|
- }).catch(e => {});
|
|
|
|
|
|
+ })
|
|
|
|
|
|
// 不需要合并
|
|
// 不需要合并
|
|
} else {
|
|
} else {
|
|
@@ -167,8 +190,8 @@ export default {
|
|
let time = new Date().getTime();
|
|
let time = new Date().getTime();
|
|
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
|
|
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
|
|
let currentChunk = 0;
|
|
let currentChunk = 0;
|
|
- const chunkSize = 2 * 1024 * 1024;
|
|
|
|
- let chunks = Math.ceil(file.size / chunkSize);
|
|
|
|
|
|
+ const chunkSize = 1 * 1024 * 1024;
|
|
|
|
+ let chunks = Math.floor(file.size / chunkSize);
|
|
let spark = new SparkMD5.ArrayBuffer();
|
|
let spark = new SparkMD5.ArrayBuffer();
|
|
|
|
|
|
// 文件状态设为"计算MD5"
|
|
// 文件状态设为"计算MD5"
|
|
@@ -191,6 +214,7 @@ export default {
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
let md5 = spark.end();
|
|
let md5 = spark.end();
|
|
|
|
+ file.file.md5 = md5;
|
|
this.computeMD5Success(md5, file);
|
|
this.computeMD5Success(md5, file);
|
|
console.log(`MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${new Date().getTime() - time} ms`);
|
|
console.log(`MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${new Date().getTime() - time} ms`);
|
|
}
|
|
}
|
|
@@ -212,18 +236,26 @@ export default {
|
|
computeMD5Success(md5, file) {
|
|
computeMD5Success(md5, file) {
|
|
// 将自定义参数直接加载uploader实例的opts上
|
|
// 将自定义参数直接加载uploader实例的opts上
|
|
console.log(this.uploader)
|
|
console.log(this.uploader)
|
|
- Object.assign(this.uploader.opts, {
|
|
|
|
- query: {
|
|
|
|
- ...this.params,
|
|
|
|
- Md5: md5
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- file.uniqueIdentifier = this.params.id;
|
|
|
|
|
|
+ // Object.assign(this.uploader.opts, {
|
|
|
|
+ // query: {
|
|
|
|
+ // uploadId: file.file.uploadId,
|
|
|
|
+ // md5
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+
|
|
|
|
+ // file.uniqueIdentifier = this.params.uploadId;
|
|
file.resume();
|
|
file.resume();
|
|
this.statusRemove(file.id);
|
|
this.statusRemove(file.id);
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ //获取文件参数
|
|
|
|
+ getFileQuery(file, chunk) {
|
|
|
|
+ return {
|
|
|
|
+ uploadId: file.file.uploadId,
|
|
|
|
+ md5: file.file.md5
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
fileListShow() {
|
|
fileListShow() {
|
|
this.collapse = this.collapse? false: true;
|
|
this.collapse = this.collapse? false: true;
|
|
|
|
|
|
@@ -243,9 +275,25 @@ export default {
|
|
// }
|
|
// }
|
|
},
|
|
},
|
|
close() {
|
|
close() {
|
|
- this.uploader.cancel();
|
|
|
|
-
|
|
|
|
- this.panelShow = false;
|
|
|
|
|
|
+ if(this.uploader.isUploading()) {
|
|
|
|
+ this.$alert(
|
|
|
|
+ "您有文件正在上传,关闭会中断上传,是否继续?",
|
|
|
|
+ "提示",
|
|
|
|
+ {
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
+ callback: action => {
|
|
|
|
+ console.log(action);
|
|
|
|
+ if (action == "confirm") {
|
|
|
|
+ this.uploader.cancel();
|
|
|
|
+ this.panelShow = false;
|
|
|
|
+ } else { }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ } else {
|
|
|
|
+ this.uploader.cancel();
|
|
|
|
+ this.panelShow = false;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
|
|
|
|
/**
|
|
/**
|