added ESlint 语法检测
This commit is contained in:
何秀钢
@@ -1,30 +1,31 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<el-divider content-position="left">大文件上传</el-divider>
|
||||
<form id="fromCont" method="post" >
|
||||
<el-divider content-position="left">大文件上传</el-divider>
|
||||
<form id="fromCont" method="post">
|
||||
<div class="fileUpload" @click="inputChange">
|
||||
选择文件
|
||||
<input v-show="false" @change="choseFile" id="file" multiple="multiple" type="file" ref="Input" />
|
||||
<input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
|
||||
</div>
|
||||
</form>
|
||||
<el-button @click="getFile" :disabled="limitFileSize" type="primary" size="medium" class="uploadBtn">上传文件</el-button>
|
||||
<el-button :disabled="limitFileSize" type="primary" size="medium" class="uploadBtn" @click="getFile">上传文件</el-button>
|
||||
<div class="el-upload__tip">请上传不超过5MB的文件</div>
|
||||
<div class="list">
|
||||
<transition name="list" tag="p">
|
||||
<div class="list-item" v-if="file" >
|
||||
<i class="el-icon-document"></i>
|
||||
<transition name="list" tag="p">
|
||||
<div v-if="file" class="list-item">
|
||||
<i class="el-icon-document" />
|
||||
<span>{{ file.name }}</span>
|
||||
<span class="percentage" >{{percentage}}%</span>
|
||||
<el-progress :show-text='false' :text-inside="false" :stroke-width="2" :percentage="percentage"></el-progress>
|
||||
</div>
|
||||
<span class="percentage">{{ percentage }}%</span>
|
||||
<el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- <span
|
||||
</div>
|
||||
<!-- <span
|
||||
v-if="this.file"
|
||||
>{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
|
||||
<div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SparkMD5 from 'spark-md5'
|
||||
import axios from 'axios'
|
||||
@@ -43,83 +44,80 @@ export default {
|
||||
waitUpLoad: [],
|
||||
waitNum: 0,
|
||||
limitFileSize: false,
|
||||
percentage:0,
|
||||
percentage: 0,
|
||||
percentageFlage: true,
|
||||
customColor: '#409eff'
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 选中文件的函数
|
||||
async choseFile(e) {
|
||||
const fileR = new FileReader() // 创建一个reader用来读取文件流
|
||||
const file = e.target.files[0] // 获取当前文件
|
||||
const maxSize = 5*1024*1024
|
||||
const maxSize = 5 * 1024 * 1024
|
||||
this.file = file // file 丢全局方便后面用 可以改进为func传参形式
|
||||
this.percentage = 0
|
||||
if(file.size<maxSize){
|
||||
fileR.readAsArrayBuffer(file) // 把文件读成ArrayBuffer 主要为了保持跟后端的流一致
|
||||
fileR.onload = async e => {
|
||||
// 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中
|
||||
const blob = e.target.result
|
||||
let spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具 （md5用于检测文件一致性 这里不懂就打电话问我）
|
||||
spark.append(blob) // 文件流丢进工具
|
||||
this.fileMd5 = spark.end() // 工具结束 产生一个a 总文件的md5
|
||||
const FileSliceCap = 1 * 1024 * 1024 // 分片字节数
|
||||
let start = 0 // 定义分片开始切的地方
|
||||
let end = 0 // 每片结束切的地方a
|
||||
let i = 0 // 第几片
|
||||
this.formDataList = [] // 分片存储的一个池子 丢全局
|
||||
while (end < file.size) {
|
||||
// 当结尾数字大于文件总size的时候 结束切片
|
||||
start = i * FileSliceCap // 计算每片开始位置
|
||||
end = (i + 1) * FileSliceCap // 计算每片结束位置
|
||||
var fileSlice = this.file.slice(start, end) // 开始切 file.slice 为 h5方法 对文件切片 参数为 起止字节数
|
||||
const formData = new window.FormData() // 创建FormData用于存储传给后端的信息
|
||||
formData.append('fileMd5', this.fileMd5) // 存储总文件的Md5 让后端知道自己是谁的切片
|
||||
formData.append('file', fileSlice) //当前的切片
|
||||
formData.append('chunkNumber', i) // 当前是第几片
|
||||
formData.append('fileName', this.file.name) //当前文件的文件名 用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法
|
||||
this.formDataList.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子
|
||||
i++
|
||||
}
|
||||
const params = {
|
||||
fileName: this.file.name,
|
||||
fileMd5: this.fileMd5,
|
||||
chunkTotal: this.formDataList.length
|
||||
}
|
||||
const res = await findFile(params)
|
||||
// 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片
|
||||
const finishList = res.data.file.ExaFileChunk // 上传成功的切片
|
||||
const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能）
|
||||
if (!IsFinish) {
|
||||
// 当是断点续传时候
|
||||
this.waitUpLoad = this.formDataList.filter(all => {
|
||||
return !(
|
||||
finishList &&
|
||||
if (file.size < maxSize) {
|
||||
fileR.readAsArrayBuffer(file) // 把文件读成ArrayBuffer 主要为了保持跟后端的流一致
|
||||
fileR.onload = async e => {
|
||||
// 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中
|
||||
const blob = e.target.result
|
||||
const spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具 （md5用于检测文件一致性 这里不懂就打电话问我）
|
||||
spark.append(blob) // 文件流丢进工具
|
||||
this.fileMd5 = spark.end() // 工具结束 产生一个a 总文件的md5
|
||||
const FileSliceCap = 1 * 1024 * 1024 // 分片字节数
|
||||
let start = 0 // 定义分片开始切的地方
|
||||
let end = 0 // 每片结束切的地方a
|
||||
let i = 0 // 第几片
|
||||
this.formDataList = [] // 分片存储的一个池子 丢全局
|
||||
while (end < file.size) {
|
||||
// 当结尾数字大于文件总size的时候 结束切片
|
||||
start = i * FileSliceCap // 计算每片开始位置
|
||||
end = (i + 1) * FileSliceCap // 计算每片结束位置
|
||||
var fileSlice = this.file.slice(start, end) // 开始切 file.slice 为 h5方法 对文件切片 参数为 起止字节数
|
||||
const formData = new window.FormData() // 创建FormData用于存储传给后端的信息
|
||||
formData.append('fileMd5', this.fileMd5) // 存储总文件的Md5 让后端知道自己是谁的切片
|
||||
formData.append('file', fileSlice) // 当前的切片
|
||||
formData.append('chunkNumber', i) // 当前是第几片
|
||||
formData.append('fileName', this.file.name) // 当前文件的文件名 用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法
|
||||
this.formDataList.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子
|
||||
i++
|
||||
}
|
||||
const params = {
|
||||
fileName: this.file.name,
|
||||
fileMd5: this.fileMd5,
|
||||
chunkTotal: this.formDataList.length
|
||||
}
|
||||
const res = await findFile(params)
|
||||
// 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片
|
||||
const finishList = res.data.file.ExaFileChunk // 上传成功的切片
|
||||
const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能）
|
||||
if (!IsFinish) {
|
||||
// 当是断点续传时候
|
||||
this.waitUpLoad = this.formDataList.filter(all => {
|
||||
return !(
|
||||
finishList &&
|
||||
finishList.some(fi => fi.FileChunkNumber === all.key)
|
||||
) // 找出需要上传的切片
|
||||
})
|
||||
} else {
|
||||
this.waitUpLoad = [] // 秒传则没有需要上传的切片
|
||||
) // 找出需要上传的切片
|
||||
})
|
||||
} else {
|
||||
this.waitUpLoad = [] // 秒传则没有需要上传的切片
|
||||
}
|
||||
this.waitNum = this.waitUpLoad.length // 记录长度用于百分比展示
|
||||
}
|
||||
this.waitNum = this.waitUpLoad.length // 记录长度用于百分比展示
|
||||
}
|
||||
} else {
|
||||
this.limitFileSize = true
|
||||
this.$message('请上传小于5M文件')
|
||||
this.limitFileSize = true
|
||||
this.$message('请上传小于5M文件')
|
||||
}
|
||||
},
|
||||
getFile() {
|
||||
// 确定按钮
|
||||
if (this.file == null) {
|
||||
if (this.file === null) {
|
||||
this.$message('请先上传文件')
|
||||
return
|
||||
}
|
||||
this.percentage = Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)
|
||||
if(this.percentage == 100){
|
||||
this.percentage = Math.floor(((this.formDataList.length - this.waitNum) / this.formDataList.length) * 100)
|
||||
if (this.percentage === 100) {
|
||||
this.percentageFlage = false
|
||||
}
|
||||
this.sliceFile() // 上传切片
|
||||
@@ -127,13 +125,13 @@ export default {
|
||||
sliceFile() {
|
||||
this.waitUpLoad &&
|
||||
this.waitUpLoad.map(item => {
|
||||
//需要上传的切片
|
||||
// 需要上传的切片
|
||||
item.formData.append('chunkTotal', this.formDataList.length) // 切片总数携带给后台 总有用的
|
||||
const fileR = new FileReader() // 功能同上
|
||||
const file = item.formData.get('file')
|
||||
fileR.readAsArrayBuffer(file)
|
||||
fileR.onload = e => {
|
||||
let spark = new SparkMD5.ArrayBuffer()
|
||||
const spark = new SparkMD5.ArrayBuffer()
|
||||
spark.append(e.target.result)
|
||||
item.formData.append('chunkMd5', spark.end()) // 获取当前切片md5 后端用于验证切片完整性
|
||||
this.upLoadFileSlice(item)
|
||||
@@ -142,9 +140,9 @@ export default {
|
||||
},
|
||||
async upLoadFileSlice(item) {
|
||||
// 切片上传
|
||||
await axios.post(process.env.VUE_APP_BASE_API+"/fileUploadAndDownload/breakpointContinue",item.formData)
|
||||
await axios.post(process.env.VUE_APP_BASE_API + '/fileUploadAndDownload/breakpointContinue', item.formData)
|
||||
this.waitNum-- // 百分数增加
|
||||
if (this.waitNum == 0) {
|
||||
if (this.waitNum === 0) {
|
||||
// 切片传完以后 合成文件
|
||||
const params = {
|
||||
fileName: this.file.name,
|
||||
@@ -162,7 +160,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
inputChange(){
|
||||
inputChange() {
|
||||
this.$refs.Input.dispatchEvent(new MouseEvent('click'))
|
||||
}
|
||||
}
|
||||
@@ -226,7 +224,7 @@ a {
|
||||
.el-divider{
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
|
||||
.list{
|
||||
margin-top:15px;
|
||||
}
|
||||
@@ -249,4 +247,4 @@ a {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -3,35 +3,35 @@
|
||||
<div class="search-term">
|
||||
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-button @click="openDialog" type="primary">新增客户</el-button>
|
||||
<el-button type="primary" @click="openDialog">新增客户</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="multipleTable"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
tooltip-effect="dark"
|
||||
>
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="接入日期" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.CreatedAt|formatDate }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名" prop="customerName" width="120"></el-table-column>
|
||||
<el-table-column label="电话" prop="customerPhoneData" width="120"></el-table-column>
|
||||
<el-table-column label="接入人ID" prop="sysUserId" width="120"></el-table-column>
|
||||
<el-table-column label="姓名" prop="customerName" width="120" />
|
||||
<el-table-column label="电话" prop="customerPhoneData" width="120" />
|
||||
<el-table-column label="接入人ID" prop="sysUserId" width="120" />
|
||||
<el-table-column label="按钮组" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="updateCustomer(scope.row)" size="small" type="text">变更</el-button>
|
||||
<el-popover placement="top" width="160" v-model="scope.row.visible">
|
||||
<el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
|
||||
<el-popover v-model="scope.row.visible" placement="top" width="160">
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
|
||||
</div>
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" slot="reference">删除</el-button>
|
||||
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -43,23 +43,23 @@
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:style="{float:'right',padding:'20px'}"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
/>
|
||||
|
||||
<el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="客户">
|
||||
<el-form :inline="true" :model="form" label-width="80px">
|
||||
<el-form-item label="客户名">
|
||||
<el-input autocomplete="off" v-model="form.customerName"></el-input>
|
||||
<el-input v-model="form.customerName" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户电话">
|
||||
<el-input autocomplete="off" v-model="form.customerPhoneData"></el-input>
|
||||
<el-input v-model="form.customerPhoneData" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
<el-button @click="enterDialog" type="primary">确 定</el-button>
|
||||
<el-button type="primary" @click="enterDialog">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
|
||||
@@ -73,93 +73,93 @@ import {
|
||||
deleteExaCustomer,
|
||||
getExaCustomer,
|
||||
getExaCustomerList
|
||||
} from "@/api/customer";
|
||||
import { formatTimeToStr } from "@/utils/date";
|
||||
import infoList from "@/mixins/infoList";
|
||||
} from '@/api/customer'
|
||||
import { formatTimeToStr } from '@/utils/date'
|
||||
import infoList from '@/mixins/infoList'
|
||||
|
||||
export default {
|
||||
name: "Customer",
|
||||
name: 'Customer',
|
||||
filters: {
|
||||
formatDate: function(time) {
|
||||
if (time !== null && time !== '') {
|
||||
var date = new Date(time)
|
||||
return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [infoList],
|
||||
data() {
|
||||
return {
|
||||
listApi: getExaCustomerList,
|
||||
dialogFormVisible: false,
|
||||
type: "",
|
||||
type: '',
|
||||
form: {
|
||||
customerName: "",
|
||||
customerPhoneData: ""
|
||||
customerName: '',
|
||||
customerPhoneData: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
formatDate: function(time) {
|
||||
if (time != null && time != "") {
|
||||
var date = new Date(time);
|
||||
return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateCustomer(row) {
|
||||
const res = await getExaCustomer({ ID: row.ID });
|
||||
this.type = "update";
|
||||
if (res.code == 0) {
|
||||
this.form = res.data.customer;
|
||||
this.dialogFormVisible = true;
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.dialogFormVisible = false;
|
||||
this.form = {
|
||||
customerName: "",
|
||||
customerPhoneData: ""
|
||||
};
|
||||
},
|
||||
async deleteCustomer(row) {
|
||||
row.visible = false;
|
||||
const res = await deleteExaCustomer({ ID: row.ID });
|
||||
if (res.code == 0) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: ""
|
||||
});
|
||||
if (this.tableData.length == 1 && this.page > 1 ) {
|
||||
this.page--;
|
||||
}
|
||||
this.getTableData();
|
||||
}
|
||||
},
|
||||
async enterDialog() {
|
||||
let res;
|
||||
switch (this.type) {
|
||||
case "create":
|
||||
res = await createExaCustomer(this.form);
|
||||
break;
|
||||
case "update":
|
||||
res = await updateExaCustomer(this.form);
|
||||
break;
|
||||
default:
|
||||
res = await createExaCustomer(this.form);
|
||||
break;
|
||||
}
|
||||
|
||||
if (res.code == 0) {
|
||||
this.closeDialog();
|
||||
this.getTableData();
|
||||
}
|
||||
},
|
||||
openDialog() {
|
||||
this.type = "create";
|
||||
this.dialogFormVisible = true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
async updateCustomer(row) {
|
||||
const res = await getExaCustomer({ ID: row.ID })
|
||||
this.type = 'update'
|
||||
if (res.code === 0) {
|
||||
this.form = res.data.customer
|
||||
this.dialogFormVisible = true
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.dialogFormVisible = false
|
||||
this.form = {
|
||||
customerName: '',
|
||||
customerPhoneData: ''
|
||||
}
|
||||
},
|
||||
async deleteCustomer(row) {
|
||||
row.visible = false
|
||||
const res = await deleteExaCustomer({ ID: row.ID })
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: ''
|
||||
})
|
||||
if (this.tableData.length === 1 && this.page > 1) {
|
||||
this.page--
|
||||
}
|
||||
this.getTableData()
|
||||
}
|
||||
},
|
||||
async enterDialog() {
|
||||
let res
|
||||
switch (this.type) {
|
||||
case 'create':
|
||||
res = await createExaCustomer(this.form)
|
||||
break
|
||||
case 'update':
|
||||
res = await updateExaCustomer(this.form)
|
||||
break
|
||||
default:
|
||||
res = await createExaCustomer(this.form)
|
||||
break
|
||||
}
|
||||
|
||||
if (res.code === 0) {
|
||||
this.closeDialog()
|
||||
this.getTableData()
|
||||
}
|
||||
},
|
||||
openDialog() {
|
||||
this.type = 'create'
|
||||
this.dialogFormVisible = true
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -19,26 +19,27 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="tableData" border row-key="ID" stripe>
|
||||
<el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
|
||||
<el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
|
||||
<el-table-column label="路由Path" min-width="160" prop="path"></el-table-column>
|
||||
<el-table-column label="ID" min-width="100" prop="ID" />
|
||||
<el-table-column label="路由Name" min-width="160" prop="name" />
|
||||
<el-table-column label="路由Path" min-width="160" prop="path" />
|
||||
<el-table-column label="是否隐藏" min-width="100" prop="hidden">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.hidden?"隐藏":"显示"}}</span>
|
||||
<span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="父节点" min-width="90" prop="parentId"></el-table-column>
|
||||
<el-table-column label="排序" min-width="70" prop="sort"></el-table-column>
|
||||
<el-table-column label="文件路径" min-width="360" prop="component"></el-table-column>
|
||||
<el-table-column label="父节点" min-width="90" prop="parentId" />
|
||||
<el-table-column label="排序" min-width="70" prop="sort" />
|
||||
<el-table-column label="文件路径" min-width="360" prop="component" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const path = process.env.VUE_APP_BASE_API;
|
||||
import { mapGetters } from 'vuex';
|
||||
import infoList from "@/mixins/infoList";
|
||||
import { exportExcel, loadExcelData, downloadTemplate } from "@/api/excel";
|
||||
import { getMenuList } from "@/api/menu";
|
||||
const path = process.env.VUE_APP_BASE_API
|
||||
import { mapGetters } from 'vuex'
|
||||
import infoList from '@/mixins/infoList'
|
||||
import { exportExcel, loadExcelData, downloadTemplate } from '@/api/excel'
|
||||
import { getMenuList } from '@/api/menu'
|
||||
export default {
|
||||
name: 'Excel',
|
||||
mixins: [infoList],
|
||||
@@ -51,24 +52,24 @@ export default {
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo', 'token'])
|
||||
},
|
||||
created() {
|
||||
this.pageSize = 999
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
handleExcelExport(fileName) {
|
||||
if (!fileName || typeof fileName !== "string") {
|
||||
fileName = "ExcelExport.xlsx";
|
||||
if (!fileName || typeof fileName !== 'string') {
|
||||
fileName = 'ExcelExport.xlsx'
|
||||
}
|
||||
exportExcel(this.tableData, fileName);
|
||||
exportExcel(this.tableData, fileName)
|
||||
},
|
||||
loadExcel() {
|
||||
this.listApi = loadExcelData;
|
||||
this.getTableData();
|
||||
this.listApi = loadExcelData
|
||||
this.getTableData()
|
||||
},
|
||||
downloadExcelTemplate() {
|
||||
downloadTemplate('ExcelTemplate.xlsx')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageSize = 999;
|
||||
this.getTableData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<keep-alive>
|
||||
<router-view v-if="$route.meta.keepAlive"></router-view>
|
||||
<router-view v-if="$route.meta.keepAlive" />
|
||||
</keep-alive>
|
||||
<router-view v-if="!$route.meta.keepAlive"></router-view>
|
||||
<router-view v-if="!$route.meta.keepAlive" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Example",
|
||||
};
|
||||
name: 'Example'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
||||
@@ -2,145 +2,143 @@
|
||||
<uploader
|
||||
:options="options"
|
||||
:file-status-text="statusText"
|
||||
:autoStart="false"
|
||||
:auto-start="false"
|
||||
class="uploader-example"
|
||||
@file-added="fileAdded"
|
||||
@file-progress="onFileProgress"
|
||||
@file-success="onFileSuccess"
|
||||
@file-error="onFileError"
|
||||
class="uploader-example"
|
||||
>
|
||||
<uploader-unsupport></uploader-unsupport>
|
||||
<uploader-unsupport />
|
||||
<uploader-drop>
|
||||
<p>拖拽文件至此或点击</p>
|
||||
<uploader-btn>选择文件</uploader-btn>
|
||||
</uploader-drop>
|
||||
<uploader-list></uploader-list>
|
||||
<uploader-list />
|
||||
</uploader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var notUploadedChunks = []; // 已经上传过的文件chunkNumber数组
|
||||
var isUploaded = false; // 文件已经上传成功了
|
||||
import { mapGetters } from "vuex";
|
||||
import { checkFileMd5,mergeFileMd5 } from "@/api/simpleUploader";
|
||||
import SparkMD5 from "spark-md5";
|
||||
const path = process.env.VUE_APP_BASE_API;
|
||||
var notUploadedChunks = [] // 已经上传过的文件chunkNumber数组
|
||||
var isUploaded = false // 文件已经上传成功了
|
||||
import { mapGetters } from 'vuex'
|
||||
import { checkFileMd5, mergeFileMd5 } from '@/api/simpleUploader'
|
||||
import SparkMD5 from 'spark-md5'
|
||||
const path = process.env.VUE_APP_BASE_API
|
||||
export default {
|
||||
name: "simpleUploader",
|
||||
data(){
|
||||
return{
|
||||
md5:""
|
||||
name: 'SimpleUploader',
|
||||
data() {
|
||||
return {
|
||||
md5: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", ["userInfo", "token"]),
|
||||
...mapGetters('user', ['userInfo', 'token']),
|
||||
statusText() {
|
||||
return {
|
||||
success: "成功了",
|
||||
error: "出错了",
|
||||
uploading: "上传中",
|
||||
paused: "暂停中",
|
||||
waiting: "等待中"
|
||||
};
|
||||
success: '成功了',
|
||||
error: '出错了',
|
||||
uploading: '上传中',
|
||||
paused: '暂停中',
|
||||
waiting: '等待中'
|
||||
}
|
||||
},
|
||||
options() {
|
||||
return {
|
||||
target: path + "/simpleUploader/upload",
|
||||
target: path + '/simpleUploader/upload',
|
||||
testChunks: false,
|
||||
simultaneousUploads: 5,
|
||||
chunkSize: 2 * 1024 * 1024,
|
||||
headers: {
|
||||
"x-token": this.token,
|
||||
"x-user-id": this.userInfo.ID
|
||||
'x-token': this.token,
|
||||
'x-user-id': this.userInfo.ID
|
||||
},
|
||||
checkChunkUploadedByResponse(chunk) {
|
||||
if (isUploaded) {
|
||||
return true; // return true 会忽略当前文件，不会再发送给后台
|
||||
return true // return true 会忽略当前文件，不会再发送给后台
|
||||
} else {
|
||||
// 根据已经上传过的切片来进行忽略
|
||||
return (
|
||||
notUploadedChunks &&
|
||||
// 根据已经上传过的切片来进行忽略
|
||||
return (
|
||||
notUploadedChunks &&
|
||||
notUploadedChunks.some(
|
||||
item => item.chunkNumber == chunk.offset + 1
|
||||
item => item.chunkNumber === chunk.offset + 1
|
||||
)
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 上传单个文件
|
||||
fileAdded(file) {
|
||||
this.computeMD5(file); // 生成MD5
|
||||
this.computeMD5(file) // 生成MD5
|
||||
},
|
||||
// 计算MD5值
|
||||
computeMD5(file) {
|
||||
var that = this;
|
||||
isUploaded = false; // 这个文件是否已经上传成功过
|
||||
notUploadedChunks = []; // 未成功的chunkNumber
|
||||
var fileReader = new FileReader();
|
||||
var md5 = "";
|
||||
var that = this
|
||||
isUploaded = false // 这个文件是否已经上传成功过
|
||||
notUploadedChunks = [] // 未成功的chunkNumber
|
||||
var fileReader = new FileReader()
|
||||
var md5 = ''
|
||||
|
||||
file.pause();
|
||||
file.pause()
|
||||
|
||||
fileReader.readAsArrayBuffer(file.file);
|
||||
fileReader.readAsArrayBuffer(file.file)
|
||||
fileReader.onload = async function(e) {
|
||||
if (file.size != e.target.result.byteLength) {
|
||||
if (file.size !== e.target.result.byteLength) {
|
||||
this.error(
|
||||
"Browser reported success but could not read the file until the end."
|
||||
);
|
||||
return false;
|
||||
'Browser reported success but could not read the file until the end.'
|
||||
)
|
||||
return false
|
||||
}
|
||||
md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false);
|
||||
md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false)
|
||||
|
||||
file.uniqueIdentifier = md5;
|
||||
if (md5 != "") {
|
||||
const res = await checkFileMd5({ md5: md5 });
|
||||
if (res.code == 0) {
|
||||
file.uniqueIdentifier = md5
|
||||
if (md5 !== '') {
|
||||
const res = await checkFileMd5({ md5: md5 })
|
||||
if (res.code === 0) {
|
||||
if (res.data.isDone) {
|
||||
// 上传成功过
|
||||
isUploaded = true;
|
||||
isUploaded = true
|
||||
that.$message({
|
||||
message: "该文件已经上传成功过了，秒传成功。",
|
||||
type: "success"
|
||||
});
|
||||
message: '该文件已经上传成功过了，秒传成功。',
|
||||
type: 'success'
|
||||
})
|
||||
|
||||
file.cancel();
|
||||
file.cancel()
|
||||
} else {
|
||||
isUploaded = false;
|
||||
notUploadedChunks = res.data.chunks;
|
||||
if(notUploadedChunks.length){
|
||||
file.resume();
|
||||
isUploaded = false
|
||||
notUploadedChunks = res.data.chunks
|
||||
if (notUploadedChunks.length) {
|
||||
file.resume()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
fileReader.onerror = function() {
|
||||
this.error(
|
||||
"generater md5 时FileReader异步读取文件出错了，FileReader onerror was triggered, maybe the browser aborted due to high memory usage."
|
||||
);
|
||||
return false;
|
||||
};
|
||||
'generater md5 时FileReader异步读取文件出错了，FileReader onerror was triggered, maybe the browser aborted due to high memory usage.'
|
||||
)
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 上传进度
|
||||
onFileProgress() {},
|
||||
// 上传成功
|
||||
async onFileSuccess(rootFile, file) {
|
||||
await mergeFileMd5({md5:file.uniqueIdentifier,fileName:file.name})
|
||||
await mergeFileMd5({ md5: file.uniqueIdentifier, fileName: file.name })
|
||||
},
|
||||
onFileError(rootFile, file, response) {
|
||||
this.$message({
|
||||
message: response,
|
||||
type: "error"
|
||||
});
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -160,4 +158,4 @@ export default {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -12,12 +12,12 @@
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
带压缩的上传, (512(k)为压缩限制)
|
||||
<upload-image v-model="imageUrl" :fileSize="512" :maxWH="1080" />
|
||||
<upload-image v-model="imageUrl" :file-size="512" :max-w-h="1080" />
|
||||
已上传文件 {{ imageUrl }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -25,7 +25,7 @@
|
||||
<el-table :data="tableData" border stripe>
|
||||
<el-table-column label="预览" width="100">
|
||||
<template slot-scope="scope">
|
||||
<CustomPic picType="file" :picSrc="scope.row.url" />
|
||||
<CustomPic pic-type="file" :pic-src="scope.row.url" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="日期" prop="UpdatedAt" width="180">
|
||||
@@ -33,8 +33,8 @@
|
||||
<div>{{ scope.row.UpdatedAt | formatDate }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="文件名" prop="name" width="180"></el-table-column>
|
||||
<el-table-column label="链接" prop="url" min-width="300"></el-table-column>
|
||||
<el-table-column label="文件名" prop="name" width="180" />
|
||||
<el-table-column label="链接" prop="url" min-width="300" />
|
||||
<el-table-column label="标签" prop="tag" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
@@ -45,8 +45,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="downloadFile(scope.row)" size="small" type="text">下载</el-button>
|
||||
<el-button @click="deleteFile(scope.row)" size="small" type="text">删除</el-button>
|
||||
<el-button size="small" type="text" @click="downloadFile(scope.row)">下载</el-button>
|
||||
<el-button size="small" type="text" @click="deleteFile(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -56,124 +56,124 @@
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
:style="{ float: 'right', padding: '20px' }"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const path = process.env.VUE_APP_BASE_API;
|
||||
import { mapGetters } from "vuex";
|
||||
import infoList from "@/mixins/infoList";
|
||||
import { getFileList, deleteFile } from "@/api/fileUploadAndDownload";
|
||||
import { downloadImage } from "@/utils/downloadImg";
|
||||
import { formatTimeToStr } from "@/utils/date";
|
||||
import CustomPic from "@/components/customPic";
|
||||
import UploadImage from "@/components/upload/image.vue";
|
||||
const path = process.env.VUE_APP_BASE_API
|
||||
import { mapGetters } from 'vuex'
|
||||
import infoList from '@/mixins/infoList'
|
||||
import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
|
||||
import { downloadImage } from '@/utils/downloadImg'
|
||||
import { formatTimeToStr } from '@/utils/date'
|
||||
import CustomPic from '@/components/customPic'
|
||||
import UploadImage from '@/components/upload/image.vue'
|
||||
export default {
|
||||
name: "Upload",
|
||||
mixins: [infoList],
|
||||
name: 'Upload',
|
||||
components: {
|
||||
CustomPic,
|
||||
UploadImage
|
||||
},
|
||||
filters: {
|
||||
formatDate: function(time) {
|
||||
if (time !== null && time !== '') {
|
||||
var date = new Date(time)
|
||||
return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [infoList],
|
||||
data() {
|
||||
return {
|
||||
fullscreenLoading: false,
|
||||
listApi: getFileList,
|
||||
path: path,
|
||||
tableData: [],
|
||||
imageUrl: ""
|
||||
};
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", ["userInfo", "token"])
|
||||
...mapGetters('user', ['userInfo', 'token'])
|
||||
},
|
||||
filters: {
|
||||
formatDate: function(time) {
|
||||
if (time != null && time != "") {
|
||||
var date = new Date(time);
|
||||
return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
created() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
async deleteFile(row) {
|
||||
this.$confirm("此操作将永久文件, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
this.$confirm('此操作将永久文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
const res = await deleteFile(row);
|
||||
if (res.code == 0) {
|
||||
.then(async() => {
|
||||
const res = await deleteFile(row)
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!"
|
||||
});
|
||||
if (this.tableData.length == 1 && this.page > 1 ) {
|
||||
this.page--;
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
if (this.tableData.length === 1 && this.page > 1) {
|
||||
this.page--
|
||||
}
|
||||
this.getTableData();
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
},
|
||||
checkFile(file) {
|
||||
this.fullscreenLoading = true;
|
||||
const isJPG = file.type === "image/jpeg";
|
||||
const isPng = file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
this.fullscreenLoading = true
|
||||
const isJPG = file.type === 'image/jpeg'
|
||||
const isPng = file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isJPG && !isPng) {
|
||||
this.$message.error("上传头像图片只能是 JPG或png 格式!");
|
||||
this.fullscreenLoading = false;
|
||||
this.$message.error('上传头像图片只能是 JPG或png 格式!')
|
||||
this.fullscreenLoading = false
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
this.fullscreenLoading = false;
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
this.fullscreenLoading = false
|
||||
}
|
||||
return (isPng || isJPG) && isLt2M;
|
||||
return (isPng || isJPG) && isLt2M
|
||||
},
|
||||
uploadSuccess(res) {
|
||||
this.fullscreenLoading = false;
|
||||
if (res.code == 0) {
|
||||
this.fullscreenLoading = false
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "上传成功"
|
||||
});
|
||||
if (res.code == 0) {
|
||||
this.getTableData();
|
||||
type: 'success',
|
||||
message: '上传成功'
|
||||
})
|
||||
if (res.code === 0) {
|
||||
this.getTableData()
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
type: 'warning',
|
||||
message: res.msg
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
uploadError() {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "上传失败"
|
||||
});
|
||||
this.fullscreenLoading = false;
|
||||
type: 'error',
|
||||
message: '上传失败'
|
||||
})
|
||||
this.fullscreenLoading = false
|
||||
},
|
||||
downloadFile(row) {
|
||||
downloadImage(row.url, row.name);
|
||||
downloadImage(row.url, row.name)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user