vue+element-ui大文件的分片上传和断点续传js-spark-md5和browser-md5-file

注意：以下共两份代码片段，第一份为原博主链接代码，第二份自己写的整体代码（比较乱）

1.参考 https://www.cnblogs.com/kelelipeng/p/10158599.html （js-spark-md5和browser-md5-file）和 https://blog.csdn.net/u011574420/article/details/80840621 （网上的案例代码）

2.大致思路：
1》首先判断上传的大文件是否已经上传过，调接口1，根据大文件的id和大文件的md5；如果上传过，则后台做秒传；如果上传过一部分或者未上传过，则进入分片上传
注意：做大文件是否上传过的判断，计算大文件的md5时间会非常久；但不判断就没法做秒传

2》分片上传：将大文件分片成多个小片段；判断当前分片是否上传，调接口2（根据传入的当前分片的 md5和大文件的id判断）
若上传过该片段，则跳过；上传下一个片段
如果未上传就上传该片段；成功则，下一个；未成功重新传此分片

3》所有分分片上传完后，后台拼接成完整文件即可

3.MD5依赖包的下载，如果是发送http协议，里面的this需要用self替换
在这里插入图片描述

4.原博主的链接代码片段

<template><div><!-- 上传文件 --><div class="upload"><input type="file" id="fileupload" style="background:white border-radius:5px" /><Button type="info" @click="uploadf">上传</Button><p>{{status}}</p><Progress :percent="percent" status="active" v-show="percentShow" style="width:36%"></Progress></div></div>
</template><script>
export default {data() {return {sizes: 10 * 1024 * 1024,url: "http://172.20.3.20:9002",percent: 0,percentShow: false,fileSize: 0,status: ""}},methods: {getMd5List(index, shardCount, file, size, name, uuid, date, filemd5) {const bmf = new BMF()let self = thisif (index < shardCount) {let shardSize = self.sizes// 计算每一片的起始与结束位置var start = index * shardSizevar end = Math.min(size, start + shardSize)//  生成 Md5 ， 将文件切割后 ， 将 切割后的 文件 读入内存中var singleFile = file.slice(start, end)//  计算出 md5 值bmf.md5(singleFile, function(err, md5) {//  验证并上传self.checkUploadFile(md5,uuid,name,size,shardCount,filemd5,date,index,singleFile)//  索引加一index = index + 1//  递归执行self.getMd5List(index,shardCount,file,size,name,uuid,date,filemd5)})//  计算进度var progress = parseInt(((index + 1) / shardCount) * 100)self.percent = progressconsole.log(self.percent)if (self.percent === 100) {self.status = "准备完毕，提交中..."}}if (index === shardCount) {console.log("计算结束 ")console.log("总片数" + shardCount)}},//  检查该文件以前是否上传过isUpload(file) {const bmf = new BMF()let self = thisfunction getUploadDataInfo(file, uuid, filemd5, date) {let shardSize = self.sizeslet name = file.name // 文件名let size = file.size // 总大小self.fileSize = sizelet shardCount = Math.ceil(size / shardSize) // 总片数//  获取 md5 列表self.getMd5List(0, shardCount, file, size, name, uuid, date, filemd5)}// // 构造一个表单，FormData是HTML5新增的// var form = new FormData()//  计算 整个 上传文件 的 Md5 码的 值self.status = "准备中..."bmf.md5(file, function(err, md5) {console.log("大文件的md5", md5)//  计算后的 md5 的 结果const uri1 = `/upload/checkMd5`const formData = {id: file.uid,md5: md5}console.log("检验大文件有无传入的参数", formData)self.$http.post(uri1, formData).then(res => {ResponseHandler(res,data => {if (res.status === 200) {console.log("大文件检查结果", data)//  获得返回结果var dataObj = data//  拿到上传文件 的 文件 IDvar uuid = dataObj.idvar date = dataObj.dateif (dataObj.state === 1) {console.log("没有上传过大文件,开始分片上传文件")// 没有上传过文件,开始分片上传文件getUploadDataInfo(file, uuid, md5, date)self.percentShow = true} else if (dataObj.state === 2) {// 已经上传部分console.log("已经上传")getUploadDataInfo(file, uuid, md5, date)} else if (dataObj.state === 3) {// 文件已经上传过console.log("文件已经上传过！！")self.status = ""}}// this.$message.success(`设置成功`)},error => {self.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {self.$message.error("设置失败，原因:" + error.message)})})},//  检查分片是否上传checkUploadFile(singleFileMd5,uuid,name,size,shardCount,fileMd5,date,i,singleFile) {let self = thisconst uri1 = `/upload/checkMd5`const formData = {md5: singleFileMd5,id: uuid}let Num = i + 1console.log("检查" + "第" + Num + "分片传入的信息", formData)// var formData = new FormData()// // check 参数 表示 这个 请求作用 是  检测分片是否上传// formData.append('action', 'check')// formData.append('uuid', uuid)// formData.append('filemd5', fileMd5)// formData.append('date', date)// formData.append('name', name)// formData.append('size', size)// formData.append('total', shardCount) // 总片数// formData.append('index', i + 1) // 当前是第几片// formData.append('md5', singleFileMd5)self.$http.post(uri1, formData).then(res => {ResponseHandler(res,data => {if (res.status === 200) {let num = i + 1console.log("第" + num + "分片检查结果--", data)var dataObj = datavar flag = dataObj.state// 服务器返回该分片是否上传过 1 表示 未上传过 ， 2 表示上传过if (flag === 1) {// 未上传self.uploadSingleFile(singleFile,fileMd5,name,singleFileMd5,uuid,date,size,shardCount,i)} else if (flag === 2) {// 已上传console.log("该分片已上传!")}}// this.$message.success(`设置成功`)},error => {self.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {self.$message.error("设置失败，原因:" + error.message)})},//  开始上传单个分片uploadSingleFile(singleFile,fileMd5,name,md5,uuid,date,size,shardCount,i) {let self = thisconst uri1 = `/appcloudfile/upload`var formData = new FormData()// upload 参数 表示 这个 请求作用 是  直接上传分片formData.append("action", "upload")formData.append("data", singleFile) // slice方法用于切出文件的一部分formData.append("uuid", uuid)formData.append("filemd5", fileMd5)formData.append("date", date)formData.append("name", name)formData.append("size", size)formData.append("total", shardCount) // 总片数formData.append("index", i + 1) // 当前是第几片//  计算出 md5 值formData.append("md5", md5)self.$http.post(uri1, formData).then(res => {ResponseHandler(res,data => {if (res.status === 200) {console.log(data)data.uploadStatus//  计算进度console.log("上传成功" + data.uploadStatus)self.percent = parseInt((data.size / self.fileSize) * 100)console.log(data.size)console.log("成功ID" + data.saveFileId)if (data.uploadStatus) {self.status = "上传成功"}}// this.$message.success(`设置成功`)},error => {self.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {self.$message.error("设置失败，原因:" + error.message)})},uploadf() {let file = $("#fileupload")[0].files[0] //文件对象this.isUpload(file)}}
}
</script><style>
</style>

.
.
.
.
.
.
.
.
分割开防止代码太多看叉行
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.

5.自己写的代码片段和步骤解释
在这里插入图片描述


<template><div class="upload"><!-- {{msg}} --><div class="left"><el-row class="tac"><el-col><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"router><el-menu-item index="upload" class="uploadLeft"><span slot="title">新建上传</span></el-menu-item><el-menu-item index="uploade" class="uploadeLeft"><span slot="title">上传历史</span></el-menu-item><el-menu-item index="uploadf" class="uploadfLeft"><span slot="title">草稿箱</span></el-menu-item></el-menu></el-col></el-row></div><div class="right"><el-card class="box-card"><div class="dec"><div class="dec-box"><span class="s1">请选择上传类型</span><span class="s2">（必填）</span><span class="s3">*</span></div></div><!-- 选择器 --><div class="select1"><el-select popper-class='selectStyle' @change="selectTrigger1(value1)" v-model="value1" :disabled="isshow" placeholder="请选择" clearable><el-optionv-for="item in options1":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></el-card><el-card class="box-card box-card-title"><div class="dec"><div class="dec-box"><span class="s1">请输入标题</span><span class="s2">（建议15字以内，必填）</span><span class="s3">*</span></div><el-inputv-if="isshowSpanVIDEO"class="content"maxlength="30"show-word-limitv-model="input"placeholder="请输入内容"></el-input><el-inputv-if="!isshowSpanVIDEO"class="content"maxlength="50"show-word-limitv-model="input"placeholder="请输入内容"></el-input></div></el-card><el-card class="box-card" v-if="!isshowSpanVIDEO"><div class="dec"><div class="dec-box"><span class="s1" v-if="isshowFILEPhotoTags">请添加资源头图</span><span class="s1" v-if="isshowARTICLEPhotoTags">请添加文章头图</span><span class="s1" v-if="isshowTOOLPhotoTags">请添加工具头图</span><!-- <span class="s2">（如未添加，系统自动加载默认头图）</span> --><span class="s3" v-if="isshowFILEPhotoTags">*</span><span class="s3" v-if="isshowARTICLEPhotoTags">*</span><span class="s3" v-if="isshowTOOLPhotoTags">*</span></div></div><div class="ml-20"><!-- 自定义上传图片按钮 --><div class="addBtn-box"><el-upload:action="`/api/upload/image`"name="image":headers="headers"list-type="picture-card":show-file-list="false":on-preview="handlePictureCardPreview":on-remove="handleRemove1":file-list="headPhotoLists":on-exceed="handleExceed":before-upload="beforeAvatarUpload":on-success="handleAvatarSuccess1"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><div v-else><i class="el-icon-plus avatar-uploader-icon"></i><p class="imgDec">请选用一张长宽比16:9的图片，格式为</p><p class="imgDec2">JPG,BMP,PNG，容量限制为1MB</p></div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt /></el-dialog></div></div></el-card><!-- 三张头图 --><el-card class="box-card" v-if="isshowSpanVIDEO"><div class="dec"><div class="dec-box"><span class="s1" v-if="isshowSpanVIDEO">请添视频头图</span><span class="s3" v-if="isshowSpanVIDEO">*</span></div></div><div class="ml-20-ptobox"><span class="videoPto" v-if="!videoPtoUrl"><i class="videoPtoDec1">请选用一张长宽比16:9的图片，格式为</i><i class="videoPtoDec2">JPG,BMP,PNG，容量限制为1MB</i></span><span class="videoPto2" v-if="videoPtoUrl"><img :src="`/image/${videoPtoUrl}`" alt=""></span><span class="videoPto1" :class="{borColor: videoPtoArrIndex === 0}" @click="setPtoIndex(0)"><img :src="`/image/${videoPtoArr[0]}`" alt=""></span><span class="videoPto11" :class="{borColor: videoPtoArrIndex === 1}" @click="setPtoIndex(1)"><img :src="`/image/${videoPtoArr[1]}`" alt=""></span><span class="videoPto111" :class="{borColor: videoPtoArrIndex === 2}" @click="setPtoIndex(2)"><img :src="`/image/${videoPtoArr[2]}`" alt=""></span><span@click="changePto"class="changePto"type="primary"plain>换一换</span><el-button class="btnPto" @click="setPto">设为头图</el-button><!-- {{videoPtoArr}} --></div></el-card><!-- 上传图片或附件 --><el-card class="box-card"><div class="p3"><div class="dec"><div class="dec-box"><span class="s1" v-if="!isshowSpanVIDEO">上传图片或附件</span><span class="s2" v-if="!isshowSpanVIDEO">(支持JPG,BMP,PNG,PDF等高清图片，,建议多个文件时上传RAR压缩包,文件大小建议不超过600MB.)</span><span class="s1" v-if="isshowSpanVIDEO">上传视频</span><span class="s2" v-if="isshowSpanVIDEO">(支持mp4/avi/wmv格式，建议文件不大于600MB)</span><span class="s3" v-if="isshowSpanVIDEO">*</span></div></div></div><div class="ml-20 up4"><!-- `/api/upload/file` :file-list="fileList4"  --><el-uploadclass="upload-demo"action="":on-change="handleChange4":before-upload="beforeAvatarUpload4":on-success="handleAvatarSuccess4":on-remove="handleRemove4":on-progress="uploadProcess"><!-- :on-progress="uploadProcess" --><el-button class="fujianBtn" size="small" type="primary">上传附件</el-button><!-- <el-progress v-show="showProcess" :percentage="processLength" :stoke-width="2"></el-progress> --></el-upload><div class="boxFileList4" v-for="item in fileList4" :key="item.id"><el-progress v-if="fileListForProgress[item.name]&&fileListForProgress[item.name].showProgress" type="line":percentage="fileListForProgress[item.name]&&fileListForProgress[item.name].percent"style="margin-top: 20px"></el-progress><span class="boxImg"><img class="img" :src="`/image/${item.sourceUrl}`" alt /></span><span class="boxName">{{item.name}}</span><span class="boxBtn" @click="delImg(item.name)">删除</span></div><!-- <divslot="tip"class="el-upload__tip">(支持JPG,BMP,PNG,PDF等高清图片，,建议多个文件时上传RAR压缩包,文件大小建议不超过600MB.)</div>--></div></el-card><!-- 简介 --><el-card class="box-card" v-if="!isshowSpanVIDEO"><div class="dec"><div class="dec-box"><span class="s1">请输入简介</span><span class="s2">（限制在200字以内）</span></div></div><div class="ml-20"><el-inputclass="textarea"type="textarea"placeholder="请输入内容"v-model="textarea"maxlength="200"show-word-limit></el-input></div></el-card><el-card class="box-card" v-if="isshowSpanVIDEO"><div class="dec"><div class="dec-box"><span class="s1">请输入简介</span><span class="s2">（限制在1000字以内）</span></div></div><div class="ml-20"><el-inputclass="textarea"type="textarea"placeholder="请输入内容"v-model="textarea"maxlength="1000"show-word-limit></el-input></div></el-card><!-- 正文  --><el-card class="box-card" v-if="!isshowSpanVIDEO"><div class="dec"><div class="dec-box"><span class="s1">请输入正文</span><span class="s2">（限制在50000字以内，单张图片大小不得超过2M）</span><span class="s3">*</span></div></div><div class="ml-20"><quill-editor ref="richEditor"></quill-editor></div></el-card><!-- 部门 --><el-card class="box-card"><div class="dec"><div class="dec-box"><span class="s1">请设置您所属部门及资源的机密级别</span><span class="s2">（必选）</span><span class="s3">*</span></div></div><!-- 选择器@mouseover="mouseover($event)" :style="{minHeight:minheight}"--><div class="selectbox" ><div class="select2" ><el-select popper-class='selectStyle' v-model="value2" placeholder="请选择" clearable><el-optionv-for="item in options2":key="item.tagId":label="item.tagName":value="item.tagId"></el-option></el-select></div><div class="select3"><el-select popper-class='selectStyle' @change="selectTrigger3(value3)" v-model="value3" placeholder="请选择" clearable><el-optionv-for="item in options3":key="item.id":label="item.name":value="item.id"></el-option></el-select></div><!-- 产品名称下拉框 --><div class="select3" v-if="isshowProduct"><el-select popper-class='selectStyle' @change="selectTrigger4(value4)" v-model="value4" placeholder="请选择" clearable><el-optionv-for="item in options4":key="item.tagId":label="item.tagName":value="item.tagId"></el-option></el-select></div></div><div class="product" v-if="isshowProduct"><el-inputclass="product"maxlength="15"show-word-limitv-model="product"placeholder="请输入产品名称(必填)"></el-input><span v-if="isshowRed">*</span></div></el-card><!-- 标签 --><el-card class="box-card"><div class="dec"><div class="dec-box"><span class="s1">请选择分类标签</span><span class="s2" v-if="isshowTagsNum3">（请至少选择3个标签以确定资源分类）</span><span class="s2" v-if="isshowTagsNum1">（请至少选择1个文章标签以确定资源分类）</span><span class="s3" v-if="isshowTagsNum3">*</span><span class="s3" v-if="isshowTagsNum1">*</span></div></div><uploadlabel ref="uploadlabel" :key="label.tagId" :obj="label" v-for="label in laberArray"></uploadlabel><!-- 保存上传 --><div class="baocun"><!-- <el-button @click="updateBtn" v-if="isshow" type="primary" plain class="uploadBtn">更新上传</el-button><el-button @click="uploadBtn" v-if="!isshow" type="primary" plain class="uploadBtn">上传</el-button><span @click="baocunBtn" v-if="!isshow" type="primary" plain class="baocunBtn">保存草稿</span>--><el-button @click="isshowBtnClick1" v-if="isshowBtn1" class="uploadBtn" v-loading="loading">上传</el-button><span@click="isshowBtnClick2"v-if="isshowBtn2"type="primary"plainclass="baocunBtn"v-loading="loading">保存草稿</span><el-button @click="isshowBtnClick3" v-if="isshowBtn3" class="uploadBtn" v-loading="loading">更新上传</el-button><el-button @click="isshowBtnClick4" v-if="isshowBtn4" class="uploadBtn" v-loading="loading">更新上传</el-button><span@click="isshowBtnClick5"v-if="isshowBtn5"type="primary"plainclass="baocunBtn"v-loading="loading">保存草稿</span></div></el-card></div></div>
</template><script>import BMF from 'browser-md5-file'import uploadlabel from './UploadLabel'// import router from 'vue-router'import {ResponseHandler} from '@/constant/index.js'import quill from '@/components/rich-editor/quill.vue' // quill调用编辑器export default {props: ['uploadlabel'],data () {return {allloading: '',mergeObj: {uuid: '',name: '',date: '',index: '',shardCount: '',oneFenpianFile: '',oneMd5: '',size: '',chunksPath: ''},length: 0,allNum: 0,num: 0,oneMd5: '', // 获取任意一个md5用于最后合并分片传给后台oneFenpianFile: '', // 获取任意一个分片文件用于最后合并分片传给后台chunksPath: [],sizes: 10 * 1024 * 1024,url: 'http://172.20.3.20:9002',percent: 0,percentShow: false,fileSize: 0,status: '',checkisUploadMD5: '',checkisUploadFILE: '',eachSize: 10 * 1024 * 1024, // 每块文件大小videoPtoUrl: '', // 视频头图的显示路径videoPtoArrIndex: '',videoUrl: '', // 视频附件的路径videoPtoArr: [], // 存三张头图isshowFILEPhotoTags: true,isshowARTICLEPhotoTags: false,isshowVIDEOPhotoTags: false,isshowTOOLPhotoTags: false,isshowTagsNum1: false,isshowTagsNum3: false,isshowRed: true,product: '',isshowProduct: false,isshowARTICLE: false,minWidth: '',isshowSpanVIDEO: false,loading: '',imgFlag: false,biaoqianArr: [],isshowBtn1: false,isshowBtn2: false,isshowBtn3: false,isshowBtn4: false,isshowBtn5: false,isupload: '',// quill参数contentQuill: ``,headPhotoUrl: require('../assets/img/upload_bgc/web_floor_03.png'),imgHeader: require('../assets/img/label_bgc/background_icon_11.png'),headPhotoLists: [],isshow: false,islink: false,msg: '上传作品',options1: [],value1: '', // 上传方式options2: [],value2: '', // 部门options3: [],value3: '', // 类别options4: [],value4: '', // 产品名称dialogImageUrl: '', // 图片预览dialogVisible: false, // 图片墙的上传headers: {Authorization: localStorage.getItem('token')},fileList2: [], // 上传附件input: '', // 输入框textarea: '', // 文本域laberArray: [],uploadArr1: [], // 上传的对象1uploadArr2: [], // 上传的对象2uploadArr3: [], // 上传的对象3uploadArr4: [], // 上传的对象4fileList3: [], // 第三个文件上传的fileList4: [],fileListForProgress: {},// 最后上传的对象lastObj: {attachs: [],tagIds: [],id: '',name: '',title: '',uploadType: '',headPhoto: '',synopsis: '',content: '',departmentId: '',confidentialityLevelId: '',contentImage: [],saveType: '' //  上传和保存},serverIP: '',imageUrl: ''}},components: {uploadlabel,quillEditor: quill // quill},computed: {editor () {return this.$refs.myQuillEditor.quill // quill}},mounted () {let content = '' // quill请求后台返回的内容字符串this.str = this.escapeStringHTML(content) // quillthis.getServerIP()// 请求第一个选择器1this.fetchSelect1()// // 请求第一个选择器2this.fetchSelect2()// 请求第一个选择器3this.fetchSelect3()// console.log(localStorage.getItem('value11'))// localStorage.setItem('product4', '')},created () {if (this.$route.query.id) {this.isshow = !this.isshow// 根据id获取会显得参数const urirouter = `/resource/${this.$route.query.id}`this.$http.get(urirouter).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.lastObj = data// 回显this.input = this.lastObj.titlethis.value1 = this.lastObj.uploadTypethis.textarea = this.lastObj.synopsisif (this.lastObj.uploadType !== 'VIDEO') {this.$refs.richEditor.setContent(this.lastObj.content)}// this.value2 = this.lastObj.departmentIdthis.value2 = this.lastObj.departmentIdthis.value3 = this.lastObj.confidentialityLevelId// this.fileList4 = this.lastObj.attachs.map(item => {//   for (const key in this.lastObj.nameMapper) {//     if (item.indexOf(key) >= 0) {//       this.$set(this.fileListForProgress, this.lastObj.nameMapper[key], {//         name: this.lastObj.nameMapper[key],//         sourceUrl: item//       })//       return {//         name: this.lastObj.nameMapper[key],//         url: `/file/` + item,//         sourceUrl: item//       }//     }//   }// })let arr1 = this.lastObj.attachs.map(item => {return item.split('.')[0]})let arr2 = []arr1.forEach(item => {if (arr1.indexOf(item) !== arr1.lastIndexOf(item)) {// console.log('重复的部分', item)this.lastObj.attachs.map(item2 => {if (item2.indexOf(item) >= 0) {if (item2.indexOf('jpg') >= 0) {// console.log('需要删除的', item2)arr2.push(item2)}}})}})let arr3 = [...new Set(arr2)]// console.log('arr3是需要删除的多余图片数组', arr3, this.lastObj.attachs)let arr4 = this.lastObj.attachs.filter(v => !arr3.includes(v))// console.log('arr4是删除多余图片后的数组', arr4)this.fileList4 = arr4.map(item => {for (const key in this.lastObj.nameMapper) {// if (item.indexOf(key) >= 0) {if (item.indexOf(key.split('/')[key.split('/').length - 1]) >= 0) {if (item.indexOf('mp4') >= 0) {item = item.substring(0, item.length - 3) + 'jpg'this.$set(this.fileListForProgress, this.lastObj.nameMapper[key], {name: this.lastObj.nameMapper[key],sourceUrl: item,jpgOrMp4: 'mp4'})return {name: this.lastObj.nameMapper[key],url: `/file/` + item,sourceUrl: item,jpgOrMp4: 'mp4',response: item.substring(0, item.length - 3) + 'mp4' // 这里需要注意如果是avi和wmn需要更改}} else if (item.indexOf('wmv') >= 0) {item = item.substring(0, item.length - 3) + 'jpg'this.$set(this.fileListForProgress, this.lastObj.nameMapper[key], {name: this.lastObj.nameMapper[key],sourceUrl: item,jpgOrMp4: 'mp4'})return {name: this.lastObj.nameMapper[key],url: `/file/` + item,sourceUrl: item,jpgOrMp4: 'mp4',response: item.substring(0, item.length - 3) + 'wmv' // 这里需要注意如果是avi和wmn需要更改}} else if (item.indexOf('avi') >= 0) {item = item.substring(0, item.length - 3) + 'jpg'this.$set(this.fileListForProgress, this.lastObj.nameMapper[key], {name: this.lastObj.nameMapper[key],sourceUrl: item,jpgOrMp4: 'mp4'})return {name: this.lastObj.nameMapper[key],url: `/file/` + item,sourceUrl: item,jpgOrMp4: 'mp4',response: item.substring(0, item.length - 3) + 'avi' // 这里需要注意如果是avi和wmn需要更改}} else {this.$set(this.fileListForProgress, this.lastObj.nameMapper[key], {name: this.lastObj.nameMapper[key],sourceUrl: item})return {name: this.lastObj.nameMapper[key],url: `/file/` + item,sourceUrl: item}}}}})// console.log(this.fileList4, this.fileListForProgress)this.imageUrl = this.calcImageUrl(this.lastObj.headPhoto)// 会显示后视频头条图的显示和换一换if (this.lastObj.uploadType === 'VIDEO') {this.videoPtoUrl = this.lastObj.headPhoto// let houzhui = ''// for (const key in this.lastObj.nameMapper) {//   if (key.indexOf('mp4') >= 0) {//     houzhui = this.lastObj.nameMapper[key]//   }// }// this.videoUrl = 'temp/' + this.lastObj.attachs[0].substring(0, this.lastObj.attachs[0].length - 4) + '/' + houzhuithis.videoUrl = this.lastObj.attachsthis.changePto()}if (this.lastObj.uploadType === 'FILE') {this.isshowFILEPhotoTags = truethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = truethis.isshowTagsNum1 = falsethis.fetchLabel(data)}if (this.lastObj.uploadType === 'ARTICLE') {this.isshowFILEPhotoTags = falsethis.isshowARTICLEPhotoTags = truethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = falsethis.isshowTagsNum1 = truethis.fetchLabelAll(data)}if (this.lastObj.uploadType === 'VIDEO') {this.isshowFILEPhotoTags = falsethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = truethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = truethis.isshowTagsNum1 = falsethis.fetchLabel(data)}if (this.lastObj.uploadType === 'TOOL') {this.isshowFILEPhotoTags = falsethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = truethis.isshowTagsNum3 = falsethis.isshowTagsNum1 = falsethis.fetchLabel(data)}// this.fetchLabelAll(data)if (this.lastObj.uploadType === 'VIDEO') {this.isshowSpanVIDEO = true}var num = this.lastObj.confidentialityLevelId - 4if (num === -3) {this.isshowProduct = truethis.product = this.lastObj.productNamethis.isshowRed = false}if (num === 0) {this.isshowProduct = truethis.product = this.lastObj.productNamethis.isshowRed = false}if (num === 1) {this.isshowProduct = truethis.product = this.lastObj.productNamethis.isshowRed = false}// this.product = this.lastObj.productName}},error => {this.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {this.$message.error('设置失败，原因:' + error.message)})return}if (localStorage.getItem('value11') === null) {this.fetchLabelAll()}if (localStorage.getItem('value11') === 'FILE') {// this.isshowSpanVIDEO = falsethis.fetchLabel()}if (localStorage.getItem('value11') === 'ARTICLE') {// this.isshowSpanVIDEO = falsethis.fetchLabelAll()}if (localStorage.getItem('value11') === 'VIDEO') {// this.isshowSpanVIDEO = falsethis.fetchLabel()}if (localStorage.getItem('value11') === 'TOOL') {// this.isshowSpanVIDEO = falsethis.fetchLabel()}},beforeRouteEnter (to, from, next) {next(vm => {//  这里的vm指的就是vue实例，可以用来当做this使用// console.log(to.fullPath)// console.log(from.path)if (to.fullPath.length >= 10) {var pathName = 1if (from.path === '/uploade') {vm.isshowBtn1 = falsevm.isshowBtn2 = falsevm.isshowBtn3 = truevm.isshowBtn4 = falsevm.isshowBtn5 = falsepathName = '/uploade'localStorage.setItem('qianduanPathName', pathName)} else if (from.path === '/uploadf') {vm.isshowBtn1 = falsevm.isshowBtn2 = falsevm.isshowBtn3 = falsevm.isshowBtn4 = truevm.isshowBtn5 = truepathName = '/uploadf'localStorage.setItem('qianduanPathName', pathName)} else if (from.path === '/') {if (localStorage.getItem('qianduanPathName') === '/uploade') {vm.isshowBtn1 = falsevm.isshowBtn2 = falsevm.isshowBtn3 = truevm.isshowBtn4 = falsevm.isshowBtn5 = false}if (localStorage.getItem('qianduanPathName') === '/uploadf') {vm.isshowBtn1 = falsevm.isshowBtn2 = falsevm.isshowBtn3 = falsevm.isshowBtn4 = truevm.isshowBtn5 = true}}} else {vm.isshowBtn1 = truevm.isshowBtn2 = truevm.isshowBtn3 = falsevm.isshowBtn4 = falsevm.isshowBtn5 = false}if (from.path === '/resources') {vm.value1 = 'FILE'}if (from.path === '/Article') {vm.value1 = 'ARTICLE'}if (from.path === '/video') {vm.value1 = 'VIDEO'vm.isshowSpanVIDEO = true}if (from.path === '/tool') {vm.value1 = 'TOOL'}})},methods: {setPto () {// console.log(this.videoPtoArrIndex, this.videoPtoArr, this.lastObj.attachs)if (this.lastObj.attachs.length > 1) {return this.$message('请删除多余附件，保留一个视频附件!')}if (this.videoPtoArrIndex === '') {return this.$message('请选择一张图片做为头图')}if (this.videoPtoArr[this.videoPtoArrIndex] === undefined) {return this.$message('请上传视频附件后再设置头图')}this.videoPtoUrl = ''setTimeout(() => {this.videoPtoUrl = this.videoPtoArr[this.videoPtoArrIndex]// this.lastObj.headPhoto = this.videoPtoUrllet zanshiUrl = this.videoPtoUrlconst index = zanshiUrl.lastIndexOf('/')const str1 = zanshiUrl.substring(0, index + 1)const str2 = zanshiUrl.substring(index + 1)this.lastObj.headPhoto = str1 + decodeURIComponent(str2)}, 0)},setPtoIndex (index) {this.videoPtoArrIndex = ''this.videoPtoArrIndex = index},changePto () {this.videoPtoArrIndex = ''if (this.lastObj.attachs.length > 1) {return this.$message('请删除多余附件，保留一个视频附件!')}if (this.lastObj.attachs.length === 0) {return this.$message('请上传一个视频附件!')}if (this.videoUrl === '') {return this.$message('请删除多余附件，保留一个视频附件!')}const loading = this.$loading({lock: true,text: '视频头图获取中...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'})this.videoPtoArr = []const uploadUrl3 = `/upload/videoCover3`var formData = new FormData()formData.append('videoPath', this.videoUrl)this.$http.post(uploadUrl3, formData).then(res => {ResponseHandler(res,data => {if (res.status === 200) {loading.close()this.videoPtoArr = data.map(item => {const index = item.lastIndexOf('/')const str1 = item.substring(0, index + 1)const str2 = item.substring(index + 1)data = str1 + encodeURIComponent(str2)return data})}},error => {this.$message.error(`上传失败，原因：${error.message}`)})}).catch(error => {this.$message.error('上传失败，原因:' + error.message)})},mouseover (event) {this.options2.forEach(item => {if (item.tagId === this.value2) {}})},selectTrigger1 (val) {if (val === 'FILE') {this.isshowFILEPhotoTags = truethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = truethis.isshowTagsNum1 = falsethis.isshowSpanVIDEO = falsethis.input = ''this.textarea = ''localStorage.setItem('value11', 'FILE')if (this.$refs.uploadlabel.length === 5) {this.$refs.uploadlabel[4].isshowBoxFalse()}this.isshowARTICLE = true}if (val === 'ARTICLE') {this.isshowFILEPhotoTags = falsethis.isshowARTICLEPhotoTags = truethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = falsethis.isshowTagsNum1 = truethis.isshowSpanVIDEO = falsethis.input = ''this.textarea = ''localStorage.setItem('value11', 'ARTICLE')if (this.$refs.uploadlabel.length === 5) {this.$refs.uploadlabel[4].isshowBoxTrue()}// this.$refs.uploadlabel[4].isshowBoxTrue()this.isshowARTICLE = falsethis.fetchLabelAll()}if (val === 'VIDEO') {if (this.lastObj.attachs.length > 1) {this.$message('请删除多余附件，保留一个视频附件!')}if (this.lastObj.attachs.length === 1) {if ((this.lastObj.attachs[0].indexOf('mp4') >= 0 || this.lastObj.attachs[0].indexOf('avi') >= 0 || this.lastObj.attachs[0].indexOf('wmv') >= 0)) {// console.log('可以调用获取', this.lastObj.attachs)this.videoUrl = this.lastObj.attachs[0]this.changePto()}}this.isshowFILEPhotoTags = falsethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = truethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = truethis.isshowTagsNum1 = falsethis.isshowSpanVIDEO = truethis.videoPtoUrl = ''this.lastObj.headPhoto = ''this.input = ''this.textarea = ''localStorage.setItem('value11', 'VIDEO')if (this.$refs.uploadlabel.length === 5) {this.$refs.uploadlabel[4].isshowBoxFalse()}this.isshowARTICLE = true}if (val === 'TOOL') {this.isshowFILEPhotoTags = falsethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = truethis.isshowTagsNum3 = falsethis.isshowTagsNum1 = falsethis.isshowSpanVIDEO = falsethis.input = ''this.textarea = ''localStorage.setItem('value11', 'TOOL')if (this.$refs.uploadlabel.length === 5) {this.$refs.uploadlabel[4].isshowBoxFalse()}this.isshowARTICLE = true}if (val === '') {this.isshowFILEPhotoTags = truethis.isshowARTICLEPhotoTags = falsethis.isshowVIDEOPhotoTags = falsethis.isshowTOOLPhotoTags = falsethis.isshowTagsNum3 = falsethis.isshowTagsNum1 = falsethis.isshowSpanVIDEO = falsethis.input = ''this.textarea = ''// this.$refs.uploadlabel[4].isshowBoxFalse()this.isshowARTICLE = true}},selectTrigger3 (val) {if (val === 1) {this.isshowProduct = true} else if (val === 4) {this.isshowProduct = true} else if (val === 5) {this.isshowProduct = true} else {this.isshowProduct = falsethis.product = ''}},selectTrigger4 (val) {if (val) {this.options4.forEach(item => {if (item.tagId === val) {this.product = item.tagName}})} else {this.product = ''}},onEditorReady (editor) {// quill准备编辑器},onEditorBlur () {}, // quill失去焦点事件onEditorFocus () {}, // quill获得焦点事件onEditorChange () {}, // quill内容改变事件// 转码escapeStringHTML (str) {str = str.replace(/&lt;/g, '<')str = str.replace(/&gt;/g, '>')return str},getServerIP () {const uri = `/getServerIp`this.$http.get(uri).then(res => {ResponseHandler(res,data => {this.serverIP = data},error => {this.$message.error(`获取ip失败，原因：${error.message}`)})}).catch(error => {this.$message.error('获取ip失败，原因:' + error.message)})},fetchSelect1 () {const uri1 = `/resource/getUploadEnum`// const params = {//   type: 'type',//   time: 'day'// }this.$http.get(uri1).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.options1 = data}},error => {this.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {this.$message.error('设置失败，原因:' + error.message)})},fetchSelect2 () {// 请求第一个选择器2const uri2 = `/resource/getDepartments`this.$http.get(uri2).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.options2 = data}},error => {this.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {this.$message.error('设置失败，原因:' + error.message)})},fetchSelect3 () {const uri3 = `/resource/getConfidentialityLevel`this.$http.get(uri3).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.options3 = data}},error => {this.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {this.$message.error('设置失败，原因:' + error.message)})},fetchSelect4 () {const uri4 = `/resource/getProductName`this.$http.get(uri4).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.options4 = data}},error => {this.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {this.$message.error('设置失败，原因:' + error.message)})},fetchLabel (resourceData) {this.laberArray = []const uritags = `/resource/getTags`this.$http.get(uritags).then(res => {ResponseHandler(res,data => {const laberArray = {}if (res.status === 200) {data.forEach(item => {if (item.parentId === 0) {laberArray[item.tagId] = {buttonType: {},labelArr: [],...item}}})data.forEach(item => {if (item.parentId !== 0) {laberArray[item.parentId].labelArr.push(item)if (resourceData &&resourceData.tagIds &&resourceData.tagIds.indexOf(item.tagId) >= 0) {this.$set(laberArray[item.parentId].buttonType,item.tagId,true)}}})delete laberArray[6]_.forEach(laberArray, item => {this.laberArray.push(item)})this.biaoqianArr = data}},error => {this.$message.error(`设置失败，原因：${error.message}`)})})},fetchLabelAll (resourceData) {this.laberArray = []const uritags = `/resource/getTags`this.$http.get(uritags).then(res => {ResponseHandler(res,data => {const laberArray = {}if (res.status === 200) {data.forEach(item => {if (item.parentId === 0) {laberArray[item.tagId] = {buttonType: {},labelArr: [],...item}}})data.forEach(item => {if (item.parentId !== 0) {laberArray[item.parentId].labelArr.push(item)if (resourceData &&resourceData.tagIds &&resourceData.tagIds.indexOf(item.tagId) >= 0) {this.$set(laberArray[item.parentId].buttonType,item.tagId,true)}}})_.forEach(laberArray, item => {this.laberArray.push(item)})this.biaoqianArr = data}},error => {this.$message.error(`设置失败，原因：${error.message}`)})})},// 导航的两个方法handleOpen (key, keyPath) {},handleClose (key, keyPath) {},// 照片墙的上传方法(移除与预览)handleRemove1 (file, fileList) {this.lastObj.headPhoto = ''},handlePictureCardPreview (file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},handleExceed (files, fileList) {this.$message.warning(`只可选择上传 1 张图片，本次选择了 ${files.length} 个图片，共选择了 ${files.length + fileList.length} 个图片`)},// 限制图片上传大小和格式beforeAvatarUpload (file) {const isJPG = file.type === 'image/jpeg'const isPNG = file.type === 'image/png'const isBPM = file.type === 'image/bpm'const isLt2M = file.size / 1024 / 1024 < 1if (!isJPG && !isPNG && !isBPM) {this.$message.error('上传头像图片只能是 JPG/PNG/BPM 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过1M!')}return (isJPG || isPNG) && isLt2M},// 图片上传成功函数handleAvatarSuccess1 (res, file, fileList) {this.imageUrl = this.calcImageUrl(res)fileList.slice(1)this.lastObj.headPhoto = res},// 以下是第四种提交附件handleChange4 (file, fileList) {// this.fileList4 = fileList},handleAvatarSuccess4 (res, file, fileList) {this.lastObj.attachs.push(res)if (res.indexOf('mp4') >= 0 || res.indexOf('avi') >= 0 || res.indexOf('wmv') >= 0) {const uploadUrl1 = `/upload/videoCover`const mp4Arr = []mp4Arr.push(res)this.$http.post(uploadUrl1, mp4Arr).then(res => {ResponseHandler(res,data => {if (res.status === 200) {const index = data.lastIndexOf('/')const str1 = data.substring(0, index + 1)const str2 = data.substring(index + 1)data = str1 + encodeURIComponent(str2)this.$set(this.fileListForProgress[file.name], 'sourceUrl', data)this.$set(this.fileListForProgress[file.name], 'jpgOrMp4', 'mp4')this.fileListForProgress[file.name].showProgress = false//  以下是为图片上传添加显示sourceUrl这个路径属性this.$set(this.fileList4[this.fileList4.length - 1], 'sourceUrl', data)this.$set(this.fileList4[this.fileList4.length - 1], 'jpgOrMp4', 'mp4')// console.log(res, file, fileList, this.fileListForProgress, this.fileList4)}},error => {this.$message.error(`上传失败，原因：${error.message}`)})}).catch(error => {this.$message.error('上传失败，原因:' + error.message)})//  三张头图获取if (this.value1 === 'VIDEO') {this.videoUrl = resthis.changePto()}} else {this.$set(this.fileListForProgress[file.name], 'sourceUrl', res)this.fileListForProgress[file.name].showProgress = false//  以下是为图片上传添加显示sourceUrl这个路径属性// console.log(res, file, fileList, this.fileListForProgress, this.fileList4)this.$set(this.fileList4[this.fileList4.length - 1], 'sourceUrl', res)}},handleRemove4 (file, fileList) {// this.fileList4 = fileList},uploadProcess (event, file, fileList) {this.$set(this.fileListForProgress[file.name], 'percent', Math.floor(event.percent))},beforeAvatarUpload4 (file) {// if (this.value1 === '') {//   this.$message('请先选则上传类型')//   return false// }var fileName = file.name || ''var ext = fileName.split('.')[fileName.split('.').length - 1]// 判断选择视频if (this.value1 === 'VIDEO') {if (ext !== 'mp4' && ext !== 'avi' && ext !== 'wmv') {this.$message.error('视频上传一次只允许上传一个视频，格式为：mp4/avi/wmv,大小不超过600MB')return false}if (ext === 'mp4' || ext === 'avi' || ext === 'wmv') {if (parseInt(file.size) > parseInt('629145600')) {this.$message.error('上传附件大小不能超过 600MB!')return false}}// if (ext !== 'mp4') {//   this.$message.error(//     '视频上传一次只允许上传一个视频，格式为：mp4大小不超过600MB'//   )//   return false// }// if (ext === 'mp4') {//   if (parseInt(file.size) > parseInt('629145600')) {//     this.$message.error('上传附件大小不能超过 600MB!')//     return false//   }// }if (this.fileList4.length > 1) {this.$message.error('视频上传一次只允许上传一个视频，格式为：mp4大小不超过600MB')return false}}if (ext !== 'jpg' &&ext !== 'png' &&ext !== 'pdf' &&ext !== 'bmp' &&ext !== 'rar' &&ext !== 'word' &&ext !== 'excel' &&ext !== 'zip' &&ext !== 'doc' &&ext !== 'docx' &&ext !== 'xls' &&ext !== 'xlsx' &&ext !== 'ppt' &&ext !== 'pptx' &&ext !== 'avi' &&ext !== 'wmv' &&ext !== 'mp4') {this.$message.error('上传资源只能是 jpg/png/bmp/rar/word/excel/zip/doc/docx/xls/xlsx/ppt/pptx/pdf/mp4/avi/wmv 格式!')return false}// if (ext === 'doc' || ext === 'docx' || ext === 'ppt' || ext === 'pptx') {//   if (parseInt(file.size) > parseInt('629145600')) {//     this.$message.error('上传附件大小不能超过 600MB!')//     return false//   }// }if (ext === 'jpg' || ext === 'png' || ext === 'pdf' || ext === 'bmp' || ext === 'rar' || ext === 'word' || ext === 'excel' || ext === 'zip' || ext === 'doc' || ext === 'docx' || ext === 'xls' || ext === 'xlsx' || ext === 'ppt' || ext === 'pptx' || ext === 'avi' || ext === 'wmv' || ext === 'mp4') {if (parseInt(file.size) > parseInt('629145600')) {this.$message.error('上传附件大小不能超过 600MB!')return false}}// 检查该文件以前是否上传过this.isUpload(file)this.$set(this.fileListForProgress, file.name, {name: file.name,showProgress: true,percent: 0,id: +new Date()})return true},getMd5List (index, shardCount, file, size, name, uuid, date) {const bmf = new BMF()let self = thisif (index < shardCount) {let shardSize = self.sizes// 计算每一片的起始与结束位置var start = index * shardSizevar end = Math.min(size, start + shardSize)//  生成 Md5 ， 将文件切割后 ， 将 切割后的 文件 读入内存中var singleFile = file.slice(start, end)//  计算出 md5 值bmf.md5(singleFile, function (err, md5) {self.mergeObj.uuid = uuidself.mergeObj.name = nameself.mergeObj.date = dateself.mergeObj.index = indexself.mergeObj.shardCount = shardCountself.mergeObj.oneFenpianFile = self.oneFenpianFileself.mergeObj.oneMd5 = self.oneMd5self.mergeObj.size = sizeself.mergeObj.chunksPath = self.chunksPathself.oneMd5 = md5self.oneFenpianFile = singleFile//  验证并上传self.checkUploadFile(md5, uuid, name, size, shardCount, date, index, singleFile, file)//  索引加一index = index + 1//  递归执行self.getMd5List(index, shardCount, file, size, name, uuid, date)})//  计算进度var progress = parseInt(((index + 1) / shardCount) * 100)self.percent = progress// console.log(self.percent)if (self.percent === 100) {self.status = '准备完毕，提交中...'}}},//  检查该文件以前是否上传过isUpload (file) {this.allloading = this.$loading({lock: true,text: '附件检验中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})let self = thisfunction getUploadDataInfo (file, uuid, date) {let shardSize = self.sizeslet name = file.name // 文件名let size = file.size // 总大小self.fileSize = sizelet shardCount = Math.ceil(size / shardSize) // 总片数self.allNum = shardCount//  获取 md5 列表self.getMd5List(0, shardCount, file, size, name, uuid, date)}// // 构造一个表单，FormData是HTML5新增的// var form = new FormData()//  计算 整个 上传文件 的 Md5 码的 值// const bmf = new BMF()// bmf.md5(file, function (err, md5) {//   console.log('大文件的MD5', md5)// })self.status = '准备中...'self.percentpercentShow = truegetUploadDataInfo(file, file.uid, file.lastModified)},//  检查分片是否上传checkUploadFile (singleFileMd5, uuid, name, size, shardCount, date, i, singleFile, file) {let self = thisconst uri1 = `/upload/checkMd5`const formData = {md5: singleFileMd5,id: uuid}self.$http.post(uri1, formData).then(res => {ResponseHandler(res,data => {if (res.status === 200) {// let num = i + 1// console.log('第' + num + '分片检查结果--', data)var dataObj = datavar flag = dataObj.state// 服务器返回该分片是否上传过 1 表示 未上传过 ， 3 表示上传过// self.uploadSingleFile(singleFile, name, singleFileMd5, uuid, date, size, shardCount, i, file)if (flag === '1') {// 未上传self.uploadSingleFile(singleFile,name,singleFileMd5,uuid,date,size,shardCount,i,file)} else if (flag === '3') {this.chunksPath.push(data.path)// 已上传// console.log('该分片已上传!')}}},error => {self.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {self.$message.error('设置失败，原因:' + error.message)})},//  开始上传单个分片uploadSingleFile (singleFile, name, md5, uuid, date, size, shardCount, i, file) {let self = thisconst uri1 = `/upload/uploadFile`let fenpianfile = new window.File([singleFile], file.name, {type: file.type})var formData = new FormData()formData.append('id', uuid)formData.append('name', name)formData.append('lastModified', date)formData.append('chunk', i + 1)formData.append('chunks', shardCount)formData.append('size', size)// formData.append('chunkFileInfo', fenpianfile)formData.append('chunkSize', self.sizes)formData.append('md5', md5)// formData.append('file', file)formData.append('file', fenpianfile)self.$http.post(uri1, formData).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.chunksPath.push(data.path)// let num = i + 1// console.log('第' + num + '个单片上传的结果', res, data)data.uploadStatus//  计算进度// console.log('上传成功' + data.uploadStatus)self.percent = parseInt((data.size / self.fileSize) * 100)if (data.uploadStatus) {self.status = '上传成功'}}},error => {// uploadSingleFile (singleFile, name, md5, uuid, date, size, shardCount, i, file)self.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {self.$message.error('设置失败，原因:' + error.message)})},// 合并分片mergeChunks (uuid, name, date, index, shardCount, fenpianfile, md5, size, chunksPath) {const formData2 = {id: uuid,fileName: name,// lastModified: date,// chunk: index + 1,chunks: shardCount,size: size,// chunkFileInfo: fenpianfile,md5: md5,chunksPath: chunksPath}// 每次上传吧分片成功后开始合并次分片const uri2 = `/upload/mergeChunks`// console.log('开始合并上传')this.$http.post(uri2, formData2).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.allloading.close()// console.log('单片合并的结果+++++++++', res)let successFileUrl = res.data.responselet successFileName = {name: res.data.name}this.fileList4.push({name: res.data.name,percentage: +res.data.percentage,response: res.data.response,state: res.data.state,status: res.data.status,uid: +res.data.id,size: +res.data.size})this.chunkSuccess(successFileUrl, successFileName)}},error => {self.$message.error(`设置失败，原因：${error.message}`)})}).catch(error => {// self.$message.error('设置失败，原因:' + error.message)})},// 分片合并成功后也就是附件上传成功后调用的函数，类似于handleAvatarSuccess4chunkSuccess (res, file) {this.lastObj.attachs.push(res)if (res.indexOf('mp4') >= 0 || res.indexOf('avi') >= 0 || res.indexOf('wmv') >= 0) {const uploadUrl1 = `/upload/videoCover`const mp4Arr = []mp4Arr.push(res)this.$http.post(uploadUrl1, mp4Arr).then(res => {ResponseHandler(res,data => {if (res.status === 200) {const index = data.lastIndexOf('/')const str1 = data.substring(0, index + 1)const str2 = data.substring(index + 1)data = str1 + encodeURIComponent(str2)this.$set(this.fileListForProgress[file.name], 'sourceUrl', data)this.$set(this.fileListForProgress[file.name], 'jpgOrMp4', 'mp4')this.fileListForProgress[file.name].showProgress = false//  以下是为图片上传添加显示sourceUrl这个路径属性this.$set(this.fileList4[this.fileList4.length - 1], 'sourceUrl', data)this.$set(this.fileList4[this.fileList4.length - 1], 'jpgOrMp4', 'mp4')}},error => {this.$message.error(`上传失败，原因：${error.message}`)})}).catch(error => {this.$message.error('上传失败，原因:' + error.message)})//  三张头图获取if (this.value1 === 'VIDEO') {this.videoUrl = resthis.changePto()}} else {this.$set(this.fileListForProgress[file.name], 'sourceUrl', res)this.fileListForProgress[file.name].showProgress = false//  以下是为图片上传添加显示sourceUrl这个路径属性// console.log(res, file, fileList, this.fileListForProgress, this.fileList4)this.$set(this.fileList4[this.fileList4.length - 1], 'sourceUrl', res)}},calcImageUrl (url) {return '/image/' + url},getParams () {const clickArr = []this.laberArray.forEach(item => {for (var k in item.buttonType) {if (item.buttonType[k] === true) {clickArr.push(+k)}}})this.lastObj.tagIds = clickArr// 将最后上传的对象各项进行赋值this.lastObj.title = this.inputthis.lastObj.uploadType = this.value1this.lastObj.synopsis = this.textareaif (this.lastObj.uploadType !== 'VIDEO') {this.lastObj.content = this.$refs.richEditor.getContent()this.lastObj.contentImage = this.$refs.richEditor.getImagePath()}this.lastObj.saveType = 0this.lastObj.departmentId = this.value2this.lastObj.confidentialityLevelId = this.value3// this.lastObj.attachs = this.fileList4.map(item => {//   // console.log(item)//   return this.fileListForProgress[item.name].sourceUrl//   // return item.response// })this.lastObj.attachs = this.fileList4.map(item => {if (item.jpgOrMp4) {return item.response} else {return this.fileListForProgress[item.name].sourceUrl}// return item.response})this.lastObj.productName = this.product},validParams () {if (this.lastObj.uploadType === 'FILE' || this.lastObj.uploadType === 'VIDEO') {if (this.lastObj.tagIds.length < 3) {this.$message('请至少选择三个标签')return true}}if (this.lastObj.departmentId === '') {this.$message('请选择所属部门')return true}if (this.lastObj.confidentialityLevelId === '') {this.$message('请选择机密级别')return true}if (this.lastObj.uploadType === '') {this.$message('请选择上传类型')return true}if (this.lastObj.title.trim() === '') {this.$message('请输入标题')return true}// 产品名称的检验  上面需要赋值 需要回显if (this.lastObj.confidentialityLevelId === 1) {if (this.product === '') {this.$message('请添加产品名称')return true}}if (this.lastObj.confidentialityLevelId === 4) {if (this.product === '') {this.$message('请添加产品名称')return true}}if (this.lastObj.confidentialityLevelId === 5) {if (this.product === '') {this.$message('请添加产品名称')return true}}// if (this.product === '') {//   this.$message('请添加产品名称')//   return true// }// if (this.lastObj.uploadType !== 'VIDEO') {//   if (this.lastObj.headPhoto === '') {//     this.$message('请添加头图')//     return true//   }// }if (this.lastObj.uploadType !== 'VIDEO') {if (this.lastObj.content === '') {this.$message('请添加正文内容')return true}}// if (this.lastObj.content === '') {//   this.$message('请添加正文内容')//   return true// }if (this.lastObj.uploadType === 'VIDEO') {if (this.lastObj.attachs.length === 0) {this.$message('视频资源需上传一条视频附件！')return true}if (this.lastObj.attachs.length > 1) {this.$message.error('视频上传一次只允许上传一个视频，格式为：mp4/avi/wmv大小不超过600MB')return true}if (this.lastObj.attachs[0].indexOf('mp4') < 0 && this.lastObj.attachs[0].indexOf('wmv') < 0 && this.lastObj.attachs[0].indexOf('avi') < 0) {this.$message.error('视频上传一次只允许上传一个视频，格式为：mp4/avi/wmv大小不超过600MB')return true}}if (this.lastObj.headPhoto === '') {this.$message('请添加头图')return true}if (this.value1 === 'ARTICLE') {const arr6 = []for (var item in this.laberArray) {for (var k in this.laberArray[item].buttonType) {if (k) {arr6.push(this.laberArray[item])}}}for (const e in arr6) {for (var key in arr6[e].buttonType) {if (arr6[e].buttonType[key]) {if (arr6[e].tagId === 6) {return false}}}}this.$message('文章资源须选择文章分类标签')return true}return false},isshowBtnClick1 () {this.getParams()if (this.validParams()) {return}this.islink = !this.islink// loadingconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'})const uploadUrl1 = `/resource/upload`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {loading.close()this.$router.push('/uploade')}this.$message.success(`上传成功`)},error => {loading.close()this.$message.error(`上传失败，原因：${error.message}`)})}).catch(error => {this.$message.error('上传失败，原因:' + error.message)})},isshowBtnClick2 () {this.getParams()if (this.validParams()) {return}this.lastObj.saveType = 1// loadingconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'})const uploadUrl1 = `/resource/upload`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {loading.close()this.$router.push('/uploadf')}this.$message.success(`保存成功`)},error => {this.$message.error(`保存失败，原因：${error.message}`)})}).catch(error => {this.$message.error('保存失败，原因:' + error.message)})},isshowBtnClick3 () {this.getParams()if (this.validParams()) {return}// loadingconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'})const uploadUrl1 = `/resource/update`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {loading.close()this.$router.push('/uploade')this.$message.success(`更新成功`)}},error => {this.$message.error(`更新失败，原因：${error.message}`)})}).catch(error => {this.$message.error('更新失败，原因:' + error.message)})},isshowBtnClick4 () {this.getParams()if (this.validParams()) {return}// loadingconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'})const uploadUrl1 = `/resource/update`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {loading.close()this.$router.push('/uploade')this.$message.success(`更新成功`)}},error => {this.$message.error(`更新失败，原因：${error.message}`)})}).catch(error => {this.$message.error('更新失败，原因:' + error.message)})},isshowBtnClick5 () {this.getParams()this.lastObj.saveType = 1if (this.validParams()) {return}// loadingconst loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'})const uploadUrl1 = `/resource/update`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {loading.close()this.$router.push('/uploadf')}this.$message.success(`保存成功`)},error => {this.$message.error(`保存失败，原因：${error.message}`)})}).catch(error => {this.$message.error('保存失败，原因:' + error.message)})},// 上传按钮uploadBtn () {this.getParams()if (this.validParams()) {return}this.islink = !this.islinkconst uploadUrl1 = `/resource/upload`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.$router.push('/uploade')}this.$message.success(`上传成功`)},error => {this.$message.error(`上传失败，原因：${error.message}`)})}).catch(error => {this.$message.error('上传失败，原因:' + error.message)})},// 更新按钮updateBtn () {this.getParams()if (this.validParams()) {return}const uploadUrl1 = `/resource/update`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.$router.push('/uploade')this.$message.success(`更新成功`)}},error => {this.$message.error(`更新失败，原因：${error.message}`)})}).catch(error => {this.$message.error('更新失败，原因:' + error.message)})},// 保存按钮baocunBtn () {this.getParams()if (this.validParams()) {return}this.lastObj.saveType = 1const uploadUrl1 = `/resource/upload`this.$http.post(uploadUrl1, this.lastObj).then(res => {ResponseHandler(res,data => {if (res.status === 200) {this.$router.push('/uploadf')}this.$message.success(`保存成功`)},error => {this.$message.error(`保存失败，原因：${error.message}`)})}).catch(error => {this.$message.error('保存失败，原因:' + error.message)})},// 删除图片delImg (name) {// 删除显示this.fileList4 = this.fileList4.filter(item => {return item.name !== name})// console.log(this.fileList4)// 真正删除图片this.lastObj.attachs = this.fileList4.map(item => {if (item.jpgOrMp4) {return item.response} else {return this.fileListForProgress[item.name].sourceUrl}})if (this.value1 === 'VIDEO') {this.videoUrl = ''this.videoPtoArr = []this.videoPtoUrl = ''this.lastObj.headPhoto = ''}if (this.value1 === 'VIDEO' && this.lastObj.attachs.length === 1) {if ((this.lastObj.attachs[0].indexOf('mp4') >= 0 || this.lastObj.attachs[0].indexOf('avi') >= 0 || this.lastObj.attachs[0].indexOf('wmv') >= 0)) {this.videoUrl = this.lastObj.attachs[0]this.changePto()}}}},watch: {fileList4: function (v1, v2) {},product: function (val1, val2) {if (val1) {this.isshowRed = falsethis.options4.forEach(item => {if (item.tagName === val1) {this.value4 = val1} else {this.value4 = val1}})} else {this.isshowRed = truethis.value4 = ''}},isshowProduct: function (val1, val2) {if (val1) {this.fetchSelect4()}},// 根据切片数组的路径的长度和总片数判断，进行合并分片chunksPath: function (v1, v2) {if (v1.length === this.mergeObj.shardCount) {this.mergeChunks(this.mergeObj.uuid, this.mergeObj.name, this.mergeObj.date, this.mergeObj.index, this.mergeObj.shardCount, this.mergeObj.oneFenpianFile, this.mergeObj.oneMd5, this.mergeObj.size, this.mergeObj.chunksPath)this.mergeObj = {}this.chunksPath = []this.oneFenpianFile = ''this.oneMd5 = ''this.num = 0}}}}
</script><style scoped lang='less'>.upload {padding-top: 20px;font-family: "Microsoft YaHei UI";font-weight: 400;font-style: normal;font-size: 22px;color: #303133;overflow: hidden;width: 1300px;margin: 0 auto;.a12 {color: #999;text-decoration: none;}.box-card {margin-bottom: 10px;/deep/ .el-card__body {padding: 0 0 20px !important;}// width: 480px;}.box-card-title {height: 130px;}.left {float: left;width: 260px;// border: 1px solid #eee;border-right: none;.el-menu-vertical-demo {border-right: none;.data-v-23c90d5b {font-size: 16px;}.el-menu-item {color: #242222;font-size: 16px;font-family: "Microsoft YaHei", "微软雅黑";}.uploadLeft {background-color: #fff;background-image: url("../assets/img/upload_bgc/web_title.png");background-repeat: no-repeat;background-position: left center;}}}.right {margin-left: 19px;float: left;// position: absolute;// top: 0px;width: 1020px;left: 200px;// border: 1px solid #eee;// padding: 20px 100px;margin-bottom: 20px;.box-card {/deep/ .el-card__body {padding: 0 0 20px 0 !important;}// width: 480px;}.ml-20 {margin-left: 20px;margin-right: 20px;.boxImg {margin-top: 42px;float: left;width: 120px;height: 70px;background-color: #f3f3f3;margin-left: 0;img {float: left;width: 120px;height: 70px;}}}.ml-20-ptobox {margin-left: 20px;margin-right: 20px;position: relative;width: 978px;height: 160px;.videoPto {position: absolute;display: inline-block;width: 280px;height: 160px;background-color: rgba(243, 243, 243, 1);border-radius: 5px;border: 1px dashed #ccc;text-align: center;cursor: pointer;img {float: left;width: 280px;height: 160px;}.videoPtoDec1 {position: relative;top: 80px;font-size: 12px;font-style: normal;}.videoPtoDec2 {position: relative;top: 90px;font-size: 12px;font-style: normal;}}.videoPto2 {position: absolute;left: 0px;top: 3px;width: 280px;height: 160px;background-color: rgba(243, 243, 243, 1);border-radius: 5px;border: 1px dashed #ccc;text-align: center;cursor: pointer;img {width: 280px;height: 160px;}}.videoPto1 {cursor: pointer;position: absolute;left: 300px;top: 3px;display: inline-block;width: 160px;height: 90px;background-color: rgba(243, 243, 243, 1);img {float: left;width: 160px;height: 90px;}}.videoPto11 {cursor: pointer;position: absolute;left: 480px;top: 3px;display: inline-block;width: 160px;height: 90px;background-color: rgba(243, 243, 243, 1);img {float: left;width: 160px;height: 90px;}}.videoPto111 {cursor: pointer;position: absolute;left: 660px;top: 3px;display: inline-block;width: 160px;height: 90px;background-color: rgba(243, 243, 243, 1);img {float: left;width: 160px;height: 90px;}}.changePto {background-color: #fff;border: 1px solid #409eff;display: inline-block;position: absolute;top: 123px;right: 120px;width: 120px;height: 40px;color: #409eff;box-sizing: border-box;border-radius: 3px;text-align: center;line-height: 40px;margin-right: 20px;font-size: 14px;cursor: pointer;}.btnPto {position: absolute;left: 857px;top: 123px;width: 120px;height: 40px;background-color: #195fff;border: none;color: #fff;}}.up4 {padding-bottom: 0px;position: relative;top: -42px;.upload-demo {/deep/ .el-upload-list__item {background-color: pink;display: none;height: 70px;line-height: 70px;.el-icon-document {font-size: 40px;}}}// 遍历自定义的图片.boxFileList4 {height: 155px;overflow: hidden;border-bottom: 1px solid #f8f8f8;.boxImg {margin-top: 42px;float: left;width: 120px;height: 70px;background-color: #f3f3f3;margin-left: 0;img {float: left;width: 120px;height: 70px;}}.boxName {margin-top: 42px;float: left;height: 70px;line-height: 70px;margin-left: 0;font-size: 16px;margin-left: 20px;}.boxBtn {text-align: center;margin-top: 57px;float: right;width: 80px;height: 40px;line-height: 40px;margin-left: 0;font-size: 16px;margin-right: 20px;background-image: url("../assets/img/upload_bgc/web_button_07.png");color: red;}}}.dec {// margin-top: 30px;margin-bottom: 15px;height: 55px;line-height: 55px;.dec-box {padding-left: 20px;border-bottom: 1px solid #f8f8f8;.s1 {display: inline-block;height: 30px;line-height: 30px;margin-top: 16px;font-family: "Microsoft YaHei UI";font-weight: 400;font-style: normal;font-size: 14px;color: #303133;}.s2 {display: inline-block;height: 30px;line-height: 30px;color: #bbb !important;font-family: "Simsun";font-weight: 400;font-size: 12px;font-style: normal;color: #303133;}.s3 {margin-left: 5px;display: inline-block;height: 30px;line-height: 30px;color: red !important;font-family: 'Simsun';font-weight: 400;font-size: 16px;font-style: normal;}}}/deep/ .el-upload--picture-card {position: relative;background-color: #f3f3f3;width: 280px;height: 160px;}.fujianBtn {width: 120px;height: 40px;// margin-left: 860px;position: absolute;top: -20px;right: 0px;background-color: rgba(25, 95, 255, 1);border: none;}.select1 {margin-left: 20px;margin-top: 10px;width: 142px;height: 42px;/deep/ .el-input--suffix {width: 142px;/deep/ .el-input__inner {border: none;width: 142px;height: 42px;background-image: url("../assets/img/upload_bgc/web_button_05.png");}.el-icon-arrow-up {display: none;}.el-icon-circle-close {margin-right: 23px;}}}.el-select {width: 160px;}.content {margin: 0 20px;display: block;height: 30px;width: 980px;}.textarea {/deep/ textarea {min-height: 100px !important;}}.s1 {float: left;}.clickbtn {float: right;margin-left: 558px;}.quill-editor {margin-top: 20px;/deep/ .ql-editor {min-height: 200px;}}.selectbox {overflow: hidden;.select2,.select3 {float: left;margin-left: 20px;// width: 142px;// background-color: skyblue;/deep/ .el-input--suffix {// width: 100%!important;// background-color: pink;width: 142px;/deep/ .el-input__inner {// background-color: pink!important;border: none;// width: 100%!important;// min-width: 142px;height: 42px;background-image: url("../assets/img/upload_bgc/web_button_05.png");}.el-icon-arrow-up {display: none;}.el-icon-circle-close {margin-right: 23px;}}}}.product {// margin-top: 20px;margin: 10px 30px 0 10px;span {position: relative;top: -35px;left: 180px;color: red !important;font-family: 'Simsun';font-weight: 400;font-size: 16px;font-style: normal;}}.baocun {margin-top: 20px;.el-button {// display: inline-block;width: 120px;height: 40px;float: right;margin-right: 20px;margin-bottom: 40px;}.uploadBtn {background: rgba(26, 96, 255, 1);color: #fff;// background-color: pink;}.baocunBtn {background-color: #fff;//border: 1px solid #409eff;float: right;width: 120px;height: 40px;color: #409eff;box-sizing: border-box;border-radius: 3px;text-align: center;line-height: 40px;margin-right: 20px;font-size: 14px;cursor: pointer;}.baocunBtn :hover {color: #409eff;}}}// 图片样式.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409eff;}.avatar-uploader-icon {font-size: 28px;// color: #8c939d;width: 146px;height: 146px;line-height: 146px;text-align: center;color: rgba(26, 96, 255, 1);font-weight: 900;}.imgDec {font-size: 12px;position: absolute;top: 20px;left: 0;width: 280px;height: 50px;}.imgDec2 {font-size: 12px;position: absolute;top: 40px;left: 0;width: 280px;height: 50px;}.avatar {width: 277px;height: 157px;display: block;}// 自定义添加图片.addBtn-box {width: 100%;// background-color: cyan;// position: relative;}}.borColor {border: 1px dashed rgba(26, 96, 255, 1);}
</style>
<style lang='less'>body {.el-select-dropdown {min-width: 142px !important;.el-scrollbar {min-width: 140px!important;padding-right: 0;.el-select-dropdown__wrap {min-width: 140px!important;.el-select-dropdown__list {.el-select-dropdown__item:hover {height: 40px;color: #fff;// background-image: url("../assets/img/upload_bgc/web_button_06.png") !important;background-color: rgba(25, 95, 255, 1);border-radius: 5px;}span {font-size: 14px;}}}.is-vertical {display: none;}}}}
</style>
<style lang="less">