Skip to content

X
xxx_phase2_web
Commit f589b46d authored by 以墨为白's avatar 以墨为白 🎧
Browse files
Options

大文件上传

parent e44c349f
Show whitespace changes
Inline Side-by-side
Showing with 163 additions and 95 deletions
src/components/common/bigfileUpload.vue
View file @ f589b46d
......@@ -5,20 +5,16 @@
</div>
<div id="thelist" class="uploader-list">
<ul>
<li v-for="(item, index) in fileList">
<a @click="removeFile(item, index)"><span title="点击移除">{{item.name}}</span></a>
<el-progress
v-if="item.percentage!=0"
:text-inside="true"
:stroke-width="14"
:percentage="item.percentage"
status="success"
></el-progress>
<li v-for="(item, index) in fileList ">
<a @click="removeFile(item, index)"><span title="点击移除">{{ item.name }}</span></a>
<span style="color: white;"
:class="[item.state == 1 ? 'el-icon-loading' : item.state == 2 ? 'el-icon-check' : '']"></span>
<el-progress :text-inside="true" :stroke-width="14" :percentage="item.percentage"
status="success"></el-progress>
</li>
</ul>
</div>
<el-button type="primary" @click="import_data_collect()">开始同步</el-button>
<!-- <div class="button-discuss" @click="import_data_collect">开始同步</div> -->
<el-button type="primary" @click="upload()">开始上传</el-button>
</div>
</template>
<script>
......@@ -50,6 +46,7 @@ export default {
{
//时间点1:所有分块进行上存之前触发该方法,即当每个文件开始上传第一个分块前就调用该方法
beforeSendFile: function (file) {
_self.fileList.filter(e => e.id == file.id)[0].state = 1;
//定义一个异步对象
var deferred = WebUploader.Deferred();
uploader
......@@ -63,7 +60,7 @@ export default {
// 判断文件是否上传过，是否存在分片，断点续传
$.ajax({
type: "POST",
url: "api/rest/upload/check",
url: "api/rest/file/bigFile/check",
async: false,
data: {
fileMd5: val,
......@@ -80,7 +77,7 @@ export default {
file.indexcode = resultCode;
}
},
error: function () {},
error: function () { },
});
//获取文件信息后进入下一步
deferred.resolve();
......@@ -110,24 +107,36 @@ export default {
//时间点3:一个文件的所有分片上传成功后，调用该方法,让后台合并所有分片
//该方法的在uploader.on("success")方法前执行。
afterSendFile: function (file) {
//如果所有分块上传成功，则通知后台合并分块
let param = {
success: file.pass,
md5: file.md5,
file: {
name: file.name,
size: file.size,
type: file.ext,
uuid: file.uid + "." + file.ext,
}
};
if (file.pass) {//文件已经存在
_self.$emit("Completed", param);
_self.fileList.filter(e => e.id == file.id)[0].state = 2;
} else { //如果所有分块上传成功，则通知后台合并分块
$.ajax({
type: "POST",
url: "api/rest/upload/merge",
url: "api/rest/file/bigFile/merge",
data: {
fileName: file.name,
fileMd5: file.md5,
fileType: _self.fileType
},
success: function (data) {
if(data.code == 9000){
_self.$message.success("成功数据"+data.data + "条数据");
}else{
_self.$message.warning(data.message);
}
_self.fileList.filter(e => e.id == file.id)[0].state = 2;
param.success = data.code == 9000;
_self.$emit("Completed", param);
},
error: function () {},
error: function () { },
});
}
},
}
);
......@@ -142,7 +151,7 @@ export default {
chunked: true,
chunkSize: 10 * 1024 * 1024, // 10M 每个分片的大小限制
threads: 3,
server: 'api/rest/upload/part',
server: 'api/rest/file/bigFile/part',
// auto: true,
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,
......@@ -152,8 +161,7 @@ export default {
});
// 当有文件被添加进队列的时候触发
uploader.on("fileQueued", function (file) {
console.log("添加", file);
_self.fileList.push({name: file.name, id: file.id, percentage: 0});
_self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
});
/**
* 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
......@@ -173,11 +181,11 @@ export default {
/**
* 文件上传成功后，就在该文件对应的位置上，显示上传成功，file.id,作为上传文件位置标签的id,
*/
uploader.on("uploadSuccess", (file) => {});
uploader.on("uploadSuccess", (file) => { });
/**
* 发生错误时
*/
uploader.on("uploadError", function (file) {});
uploader.on("uploadError", function (file) { });
/**
* 不管所有分片发送成功或者失败都会执行该方法
*/
......@@ -188,53 +196,56 @@ export default {
this.uploader = uploader;
},
methods: {
import_data_collect() {
upload() {
this.uploader.upload();
},
removeFile(item, index) {
if (item.state == 1) {//上传中的文件无法删除
return;
}
this.uploader.removeFile(item.id);
this.fileList.splice(index, 1);
},
getProgressBar(file, percentage) {
let item = this.fileList.find(e=>e.id == file.id);
let item = this.fileList.find(e => e.id == file.id);
item && (item.percentage = Math.floor(percentage * 100 * 100) / 100);
}
},
};
</script>
<style lang="scss" scope>
.uploadWrapper {
height: 100%;
}
.uploadWrapper {
height: 524px;
}
#picker > div:nth-child(2){
#picker>div:nth-child(2) {
width: 126px !important;
height: 40px !important;
}
}
.btnUpload{
.btnUpload {
height: 50px;
}
}
#thelist{
#thelist {
height: auto;
overflow-y: auto;
max-height: calc(100% - 40px);
}
}
#thelist a{
#thelist a {
text-decoration: underline;
cursor: pointer;
font-size: 18px;
}
}
#thelist li {
#thelist li {
/* 去掉li前面的小圆点 */
list-style: none;
margin: 10px 0px;
}
}
.button-discuss {
.button-discuss {
width: 100px;
height: 30px;
line-height: 30px;
......@@ -247,5 +258,5 @@ export default {
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
</style>
src/view/sjgl/wxk_public.vue
View file @ f589b46d
......@@ -24,6 +24,7 @@
circle></el-button>
</el-tooltip> -->
<div class="button-discuss1" @click="handleAdd()">新增</div>
<div class="button-discuss1" @click="bigFileUploadAdd()">大文件新增</div>
</div>
<div class="bottom-div">
<transition name="el-zoom-in-top" v-on:after-leave="afterLeave_lb">
......@@ -262,6 +263,11 @@
<el-button type="primary" @click="submit_bj">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="大文件上传" :visible.sync="centerDialogVisible_bigFile" width="30%" center class="xzwd">
<BigfileUpload @Completed="completeUploadBigFile"></BigfileUpload>
</el-dialog>
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
<div style="height: 400px; position: relative">
<video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
......@@ -289,10 +295,12 @@ import {
arr_sound_format, //音频的文件格式
} from "../../util/http_util";
import { uuid } from "../../util/data_util";
import BigfileUpload from "../../components/common/bigfileUpload.vue";
export default {
data() {
return {
centerDialogVisible_add: false,
centerDialogVisible_bigFile: false,
centerDialogVisible_edit: false,
centerDialogVisible_video: false,
centerDialogVisible_sound: false,
......@@ -356,6 +364,9 @@ export default {
}
};
},
components: {
BigfileUpload
},
props: {
clientDetails: {
type: Object,
......@@ -626,6 +637,51 @@ export default {
}, 200)
},
bigFileUploadAdd() {
if (this.clientDetails_type[0] == 1 || this.clientDetails_type[0] == 2 || this.clientDetails_type[0] == 3 || this.clientDetails_type[0] == 4) {
this.$message({
type: "warning",
message: "请选择文档列表子节点",
});
return;
}
let _this = this;
_this.centerDialogVisible_bigFile = true;
},
completeUploadBigFile(evt) {
if (!evt.success) {
this.$message({
type: "warning",
message: "上传失败!",
});
}
let fd = new FormData();
let fileInfo = {
createId: this.$store.getters.userInfo.account,
description: null,
file: evt.file,
treeId: this.clientDetails_type[0],
name: evt.file.name,
keyword: null,
module: this.module_name
};
fd.append("info", JSON.stringify(fileInfo));
fd.append("destFilename", evt.file.uuid);
fd.append("md5", evt.md5);
fileUpload_PUT("api/rest/3z/document/upload", fd).then((data) => {
this.$message({
type: "success",
message: "文件上传成功!",
});
this.centerDialogVisible_add = false;
this.handleCurrentChange_lb(1);
})
.catch((err) => {
this.$message.warning(err.message);
})
},
//编辑弹出框确定
submit_bj() {
let _this = this;
......@@ -1328,4 +1384,5 @@ export default {
padding: 25px 25px 0px;
}
}
}</style>
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment