vue+element-ui大文件的分片上传和断点续传js-spark-md5和browser-md5-file
http://www.javascriptcn.com/post/35682https://github.com/satazor/js-spark-md5vue+element-ui大文件的分片上传和断点续传js-spark-md5和browser-md5-file注意：以下共两份代码片段，第一份为原博主链接代码，第二份自己写的整体代码（比较乱）1.参考 https://www.cnblogs.c
·
+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 （网上的案例代码）
http://www.javascriptcn.com/post/35682
https://github.com/satazor/js-spark-md5
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 = this
if (index < shardCount) {
let shardSize = self.sizes
// 计算每一片的起始与结束位置
var start = index * shardSize
var 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 = progress
console.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 = this
function getUploadDataInfo(file, uuid, filemd5, date) {
let shardSize = self.sizes
let name = file.name // 文件名
let size = file.size // 总大小
self.fileSize = size
let 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
// 拿到上传文件 的 文件 ID
var uuid = dataObj.id
var date = dataObj.date
if (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 = this
const uri1 = `/upload/checkMd5`
const formData = {
md5: singleFileMd5,
id: uuid
}
let Num = i + 1
console.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 + 1
console.log("第" + num + "分片检查结果--", data)
var dataObj = data
var 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 = this
const 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-menu
default-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-option
v-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-input
v-if="isshowSpanVIDEO"
class="content"
maxlength="30"
show-word-limit
v-model="input"
placeholder="请输入内容"
></el-input>
<el-input
v-if="!isshowSpanVIDEO"
class="content"
maxlength="50"
show-word-limit
v-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-upload
class="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>
<!-- <div
slot="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-input
class="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-input
class="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-option
v-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-option
v-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-option
v-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-input
class="product"
maxlength="15"
show-word-limit
v-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"
plain
class="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"
plain
class="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: [], // 上传的对象1
uploadArr2: [], // 上传的对象2
uploadArr3: [], // 上传的对象3
uploadArr4: [], // 上传的对象4
fileList3: [], // 第三个文件上传的
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) // quill
this.getServerIP()
// 请求第一个选择器1
this.fetchSelect1()
// // 请求第一个选择器2
this.fetchSelect2()
// 请求第一个选择器3
this.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.title
this.value1 = this.lastObj.uploadType
this.textarea = this.lastObj.synopsis
if (this.lastObj.uploadType !== 'VIDEO') {
this.$refs.richEditor.setContent(this.lastObj.content)
}
// this.value2 = this.lastObj.departmentId
this.value2 = this.lastObj.departmentId
this.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) + '/' + houzhui
this.videoUrl = this.lastObj.attachs
this.changePto()
}
if (this.lastObj.uploadType === 'FILE') {
this.isshowFILEPhotoTags = true
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = true
this.isshowTagsNum1 = false
this.fetchLabel(data)
}
if (this.lastObj.uploadType === 'ARTICLE') {
this.isshowFILEPhotoTags = false
this.isshowARTICLEPhotoTags = true
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = false
this.isshowTagsNum1 = true
this.fetchLabelAll(data)
}
if (this.lastObj.uploadType === 'VIDEO') {
this.isshowFILEPhotoTags = false
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = true
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = true
this.isshowTagsNum1 = false
this.fetchLabel(data)
}
if (this.lastObj.uploadType === 'TOOL') {
this.isshowFILEPhotoTags = false
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = true
this.isshowTagsNum3 = false
this.isshowTagsNum1 = false
this.fetchLabel(data)
}
// this.fetchLabelAll(data)
if (this.lastObj.uploadType === 'VIDEO') {
this.isshowSpanVIDEO = true
}
var num = this.lastObj.confidentialityLevelId - 4
if (num === -3) {
this.isshowProduct = true
this.product = this.lastObj.productName
this.isshowRed = false
}
if (num === 0) {
this.isshowProduct = true
this.product = this.lastObj.productName
this.isshowRed = false
}
if (num === 1) {
this.isshowProduct = true
this.product = this.lastObj.productName
this.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 = false
this.fetchLabel()
}
if (localStorage.getItem('value11') === 'ARTICLE') {
// this.isshowSpanVIDEO = false
this.fetchLabelAll()
}
if (localStorage.getItem('value11') === 'VIDEO') {
// this.isshowSpanVIDEO = false
this.fetchLabel()
}
if (localStorage.getItem('value11') === 'TOOL') {
// this.isshowSpanVIDEO = false
this.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 = 1
if (from.path === '/uploade') {
vm.isshowBtn1 = false
vm.isshowBtn2 = false
vm.isshowBtn3 = true
vm.isshowBtn4 = false
vm.isshowBtn5 = false
pathName = '/uploade'
localStorage.setItem('qianduanPathName', pathName)
} else if (from.path === '/uploadf') {
vm.isshowBtn1 = false
vm.isshowBtn2 = false
vm.isshowBtn3 = false
vm.isshowBtn4 = true
vm.isshowBtn5 = true
pathName = '/uploadf'
localStorage.setItem('qianduanPathName', pathName)
} else if (from.path === '/') {
if (localStorage.getItem('qianduanPathName') === '/uploade') {
vm.isshowBtn1 = false
vm.isshowBtn2 = false
vm.isshowBtn3 = true
vm.isshowBtn4 = false
vm.isshowBtn5 = false
}
if (localStorage.getItem('qianduanPathName') === '/uploadf') {
vm.isshowBtn1 = false
vm.isshowBtn2 = false
vm.isshowBtn3 = false
vm.isshowBtn4 = true
vm.isshowBtn5 = true
}
}
} else {
vm.isshowBtn1 = true
vm.isshowBtn2 = true
vm.isshowBtn3 = false
vm.isshowBtn4 = false
vm.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.videoPtoUrl
let zanshiUrl = this.videoPtoUrl
const 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 = true
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = true
this.isshowTagsNum1 = false
this.isshowSpanVIDEO = false
this.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 = false
this.isshowARTICLEPhotoTags = true
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = false
this.isshowTagsNum1 = true
this.isshowSpanVIDEO = false
this.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 = false
this.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 = false
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = true
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = true
this.isshowTagsNum1 = false
this.isshowSpanVIDEO = true
this.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 = false
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = true
this.isshowTagsNum3 = false
this.isshowTagsNum1 = false
this.isshowSpanVIDEO = false
this.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 = true
this.isshowARTICLEPhotoTags = false
this.isshowVIDEOPhotoTags = false
this.isshowTOOLPhotoTags = false
this.isshowTagsNum3 = false
this.isshowTagsNum1 = false
this.isshowSpanVIDEO = false
this.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 = false
this.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(/</g, '<')
str = str.replace(/>/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 () {
// 请求第一个选择器2
const 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.url
this.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 < 1
if (!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 = res
this.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 = this
if (index < shardCount) {
let shardSize = self.sizes
// 计算每一片的起始与结束位置
var start = index * shardSize
var end = Math.min(size, start + shardSize)
// 生成 Md5 ， 将文件切割后 ， 将 切割后的 文件 读入内存中
var singleFile = file.slice(start, end)
// 计算出 md5 值
bmf.md5(singleFile, function (err, md5) {
self.mergeObj.uuid = uuid
self.mergeObj.name = name
self.mergeObj.date = date
self.mergeObj.index = index
self.mergeObj.shardCount = shardCount
self.mergeObj.oneFenpianFile = self.oneFenpianFile
self.mergeObj.oneMd5 = self.oneMd5
self.mergeObj.size = size
self.mergeObj.chunksPath = self.chunksPath
self.oneMd5 = md5
self.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 = this
function getUploadDataInfo (file, uuid, date) {
let shardSize = self.sizes
let name = file.name // 文件名
let size = file.size // 总大小
self.fileSize = size
let 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 = true
getUploadDataInfo(file, file.uid, file.lastModified)
},
// 检查分片是否上传
checkUploadFile (singleFileMd5, uuid, name, size, shardCount, date, i, singleFile, file) {
let self = this
const 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 = data
var 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 = this
const 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.response
let 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)
})
},
// 分片合并成功后也就是附件上传成功后调用的函数，类似于handleAvatarSuccess4
chunkSuccess (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 = res
this.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.input
this.lastObj.uploadType = this.value1
this.lastObj.synopsis = this.textarea
if (this.lastObj.uploadType !== 'VIDEO') {
this.lastObj.content = this.$refs.richEditor.getContent()
this.lastObj.contentImage = this.$refs.richEditor.getImagePath()
}
this.lastObj.saveType = 0
this.lastObj.departmentId = this.value2
this.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
// loading
const 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
// loading
const 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
}
// loading
const 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
}
// loading
const 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 = 1
if (this.validParams()) {
return
}
// loading
const 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.islink
const 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 = 1
const 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 = false
this.options4.forEach(item => {
if (item.tagName === val1) {
this.value4 = val1
} else {
this.value4 = val1
}
})
} else {
this.isshowRed = true
this.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">
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)