[update] 文件上传组件-文件预览的优化

This commit is contained in:
fengchenchen
2021-09-06 13:41:30 +08:00
parent 8ba578030c
commit c7af6d8d35
2 changed files with 305 additions and 294 deletions
+303 -292
View File
@@ -17,11 +17,12 @@
:class="{'uploadty-disabled':disabled}">
<template>
<div v-if="isImageComp">
<a-icon type="plus" />
<a-icon type="plus"/>
<div class="ant-upload-text">{{ text }}</div>
</div>
<a-button v-else-if="buttonVisible">
<a-icon type="upload" />{{ text }}
<a-icon type="upload"/>
{{ text }}
</a-button>
</template>
</a-upload>
@@ -30,333 +31,343 @@
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileAccessHttpUrl } from '@/api/manage'
import { getFileInfo } from '@/api/api'
const Base64 = require('js-base64').Base64
import Vue from 'vue'
import {ACCESS_TOKEN} from '@/store/mutation-types'
import {getFileAccessHttpUrl} from '@/api/manage'
import {getFileInfo} from '@/api/api'
const FILE_TYPE_ALL = 'all'
const FILE_TYPE_IMG = 'image'
const FILE_TYPE_TXT = 'file'
const uidGenerator=()=>{
return '-'+parseInt(Math.random()*10000+1,10)
}
export default {
name: 'JUpload',
data(){
return {
uploadAction:window._CONFIG['domianURL']+'/sys/common/upload',
headers:{},
fileList: [],
newFileList: [],
uploadGoOn:true,
}
const Base64 = require('js-base64').Base64
const FILE_TYPE_ALL = 'all'
const FILE_TYPE_IMG = 'image'
// const FILE_TYPE_TXT = 'file'
const uidGenerator = () => {
return '-' + parseInt(Math.random() * 10000 + 1, 10)
}
export default {
name: 'JUpload',
data() {
return {
uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
headers: {},
fileList: [],
newFileList: [],
uploadGoOn: true,
}
},
props: {
text: {
type: String,
required: false,
default: '点击上传'
},
props: {
text: {
type: String,
required: false,
default: '点击上传'
},
fileType: {
type: String,
required: false,
default: FILE_TYPE_ALL
},
/*这个属性用于控制文件上传的业务路径*/
bizPath: {
type: String,
required: false,
default: 'temp'
},
value: {
type: [String, Array],
required: false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
disabled: {
type: Boolean,
required: false,
default: false
},
// update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
//此属性被废弃了
triggerChange: {
type: Boolean,
required: false,
default: false
},
/**
* update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url
* true:仅返回url
* false:返回fileName filePath fileSize
*/
returnUrl: {
type: Boolean,
required: false,
default: true
},
/**
* 仅返回文件id
* true 仅返回文件id
* false 返回reurl
* */
returnId:{
type:Boolean,
required:false,
default: false
},
number: {
type: Number,
required: false,
default: 0
},
buttonVisible: {
type: Boolean,
required: false,
default: true
},
fileType: {
type: String,
required: false,
default: FILE_TYPE_ALL
},
watch:{
value:{
immediate: true,
handler() {
let val = this.value
if (val instanceof Array) {
if(this.returnUrl){
this.initFileList(val.join(','))
}else{
this.initFileListArr(val)
}
/*这个属性用于控制文件上传的业务路径*/
bizPath: {
type: String,
required: false,
default: 'temp'
},
value: {
type: [String, Array],
required: false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
disabled: {
type: Boolean,
required: false,
default: false
},
// update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
//此属性被废弃了
triggerChange: {
type: Boolean,
required: false,
default: false
},
/**
* update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url
* true:仅返回url
* false:返回fileName filePath fileSize
*/
returnUrl: {
type: Boolean,
required: false,
default: true
},
/**
* 仅返回文件id
* true 仅返回文件id
* false 返回reurl
* */
returnId: {
type: Boolean,
required: false,
default: false
},
number: {
type: Number,
required: false,
default: 0
},
buttonVisible: {
type: Boolean,
required: false,
default: true
},
},
watch: {
value: {
immediate: true,
handler() {
let val = this.value
if (val instanceof Array) {
if (this.returnUrl) {
this.initFileList(val.join(','))
} else {
this.initFileList(val)
this.initFileListArr(val)
}
} else {
this.initFileList(val)
}
}
}
},
computed: {
//透传给下级组件的事件,需要排除本组件使用的change事件
childListeners() {
// const vm = this
let result = Object.assign({},
this.$listeners,
)
delete result.change
return result
},
computed:{
//透传给下级组件的事件,需要排除本组件使用的change事件
childListeners() {
const vm = this
let result = Object.assign({},
this.$listeners,
)
delete result.change
return result
},
isImageComp(){
return this.fileType === FILE_TYPE_IMG
},
complistType(){
return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
},
isImageComp() {
return this.fileType === FILE_TYPE_IMG
},
created(){
const token = Vue.ls.get(ACCESS_TOKEN)
//---------------------------- begin 图片左右换位置 -------------------------------------
this.headers = {'X-Access-Token':token}
this.containerId = 'container-ty-'+new Date().getTime()
//---------------------------- end 图片左右换位置 -------------------------------------
complistType() {
return this.fileType === FILE_TYPE_IMG ? 'picture-card' : 'text'
},
methods:{
initFileListArr(val){
if(!val || val.length==0){
this.fileList = []
return
}
for(var a=0;a<val.length;a++){
this.fileList.forEach((item)=>{
if (item.url === val[a]){
item.uid = uidGenerator()
item.response.status = 'done'
}
})
}
},
async initFileList(paths){
if(!paths || paths.length === 0){
this.fileList = []
return
}
let arr = paths.split(',')
// 返回路径的时候,对路径进行操作,取出所属id
if(!this.returnId && arr.length > 0) {
const newArr = []
arr.map(item => {
let itemArr = item.split('/')
newArr.push(itemArr[itemArr.length - 1])
})
arr = newArr
}
const fileList = []
for (let a = 0; a < arr.length; a++) {
// 获取每一个文件的信息,组成fileList
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
//---------------------------- begin 图片左右换位置 -------------------------------------
this.headers = {'X-Access-Token': token}
this.containerId = 'container-ty-' + new Date().getTime()
//---------------------------- end 图片左右换位置 -------------------------------------
},
methods: {
initFileListArr(val) {
if (!val || val.length === 0) {
this.fileList = []
return
}
for (let a = 0; a < val.length; a++) {
this.fileList.forEach((item) => {
if (item.url === val[a]) {
item.uid = uidGenerator()
item.response.status = 'done'
}
})
}
},
async initFileList(paths) {
if (!paths || paths.length === 0) {
this.fileList = []
return
}
let arr = paths.split(',')
// 返回路径的时候,对路径进行操作,取出所属id
if (!this.returnId && arr.length > 0) {
const newArr = []
arr.map(item => {
let itemArr = item.split('/')
newArr.push(itemArr[itemArr.length - 1])
})
arr = newArr
}
const fileList = []
for (let a = 0; a < arr.length; a++) {
// 获取每一个文件的信息,组成fileList
// 突然想判断现在的fileList 中是否是历史的信息,如果是的话则先进行匹配
let isHistory = this.fileList.find(file => file.response.status === 'history' && (file.response.result || {}).id === arr[a])
console.log("isHistory===", isHistory)
if (isHistory) {
fileList.push(isHistory)
} else {
const fileObj = await this.getFileInfo(arr[a])
const url = getFileAccessHttpUrl(arr[a])
fileList.push({
uid: uidGenerator(),
name: fileObj.fileName,
name: (fileObj || {}).fileName,
status: 'done',
url: url,
response: {
status: 'history',
message: arr[a]
message: arr[a],
result: fileObj
}
})
}
this.fileList = [...fileList]
},
handlePathChange(){
let uploadFiles = this.fileList
let path = ''
// 文件id
let fileIds = ''
if(!uploadFiles || uploadFiles.length==0){
path = ''
}
let arr = []
// 如果returnid为true 只返回id
if(this.returnId){
for(var a=0;a<uploadFiles.length;a++){
if(uploadFiles[a].status === 'done' ) {
arr.push(uploadFiles[a].response.result.id)
}else{
return
}
}
if(arr.length>0){
fileIds = arr.join(',')
}
this.$emit('change', fileIds)
return
}
for(var a=0;a<uploadFiles.length;a++){
if(uploadFiles[a].status === 'done' ) {
arr.push(uploadFiles[a].url)
}else{
}
this.fileList = [...fileList]
},
handlePathChange() {
let uploadFiles = this.fileList
let path = ''
// 文件id
let fileIds = ''
if (!uploadFiles || uploadFiles.length === 0) {
path = ''
}
let arr = []
// 如果returnid为true 只返回id
if (this.returnId) {
for (let a = 0; a < uploadFiles.length; a++) {
if (uploadFiles[a].status === 'done') {
arr.push(uploadFiles[a].response.result.id)
} else {
return
}
}
if(arr.length>0){
path = arr.join(',')
if (arr.length > 0) {
fileIds = arr.join(',')
}
this.$emit('change', path)
},
beforeUpload(file){
this.uploadGoOn=true
var fileType = file.type
if(this.fileType===FILE_TYPE_IMG){
if(fileType.indexOf('image')<0){
this.$message.warning('请上传图片')
this.uploadGoOn=false
return false
}
this.$emit('change', fileIds)
return
}
for (let a = 0; a < uploadFiles.length; a++) {
if (uploadFiles[a].status === 'done') {
arr.push(uploadFiles[a].url)
} else {
return
}
//TODO 扩展功能验证文件大小
return true
},
handleChange(info) {
if(!info.file.status && this.uploadGoOn === false){
info.fileList.pop()
}
if (arr.length > 0) {
path = arr.join(',')
}
this.$emit('change', path)
},
beforeUpload(file) {
this.uploadGoOn = true
let fileType = file.type
if (this.fileType === FILE_TYPE_IMG) {
if (fileType.indexOf('image') < 0) {
this.$message.warning('请上传图片')
this.uploadGoOn = false
return false
}
let fileList = info.fileList
if(info.file.status==='done'){
if(this.number>0){
fileList = fileList.slice(-this.number)
}
if(info.file.response.success){
fileList = fileList.map((file) => {
if (file.response) {
// let reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`;
file.url = getFileAccessHttpUrl(file.response.result.id)
}
return file
})
}
//this.$message.success(`${info.file.name} 上传成功!`);
}else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上传失败.`)
}else if(info.file.status === 'removed'){
this.handleDelete(info.file)
}
//TODO 扩展功能验证文件大小
return true
},
handleChange(info) {
if (!info.file.status && this.uploadGoOn === false) {
info.fileList.pop()
}
let fileList = info.fileList
if (info.file.status === 'done') {
if (this.number > 0) {
fileList = fileList.slice(-this.number)
}
this.fileList = fileList
if(info.file.status==='done' || info.file.status === 'removed'){
//returnUrl为true时仅返回文件路径
if(this.returnUrl){
this.handlePathChange()
}else{
//returnUrl为false时返回文件名称、文件路径及文件大小
this.newFileList = []
for(var a=0;a<fileList.length;a++){
// update-begin-author:lvdandan date:20200603 for:TESTA-514开源issue多个文件同时上传时控制台报错
if(fileList[a].status === 'done' ) {
var fileJson = {
fileName:fileList[a].name,
filePath:fileList[a].url,
fileSize:fileList[a].size
}
this.newFileList.push(fileJson)
}else{
return
}
// update-end-author:lvdandan date:20200603 for:TESTA-514开源issue多个文件同时上传时控制台报错
if (info.file.response.success) {
fileList = fileList.map((file) => {
if (file.response) {
// let reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`;
file.url = getFileAccessHttpUrl(file.response.result.id)
}
this.$emit('change', this.newFileList)
}
}
},
handleDelete(file){
//如有需要新增 删除逻辑
console.log(file)
},
handlePreview(file) {
if (file && file.url) {
var fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
// let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
window.open(url)
}
},
getFileUrl(fileId){
return `${window._CONFIG['domianURL']}/sys/common/download/${fileId}`
},
/**
* 通过文件的id获取文件的相关信息
* @param id
*/
getFileInfo(id) {
return new Promise(resolve => {
let result = {}
getFileInfo({id: id}).then(res => {
if (res.success) {
result = res.result
}
}).finally(() => {
resolve(result)
return file
})
})
}
//this.$message.success(`${info.file.name} 上传成功!`);
} else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上传失败.`)
} else if (info.file.status === 'removed') {
this.handleDelete(info.file)
}
this.fileList = fileList
if (info.file.status === 'done' || info.file.status === 'removed') {
//returnUrl为true时仅返回文件路径
if (this.returnUrl) {
this.handlePathChange()
} else {
//returnUrl为false时返回文件名称、文件路径及文件大小
this.newFileList = []
for (let a = 0; a < fileList.length; a++) {
// update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时,控制台报错
if (fileList[a].status === 'done') {
let fileJson = {
fileName: fileList[a].name,
filePath: fileList[a].url,
fileSize: fileList[a].size
}
this.newFileList.push(fileJson)
} else {
return
}
// update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时,控制台报错
}
this.$emit('change', this.newFileList)
}
}
},
mounted(){},
model: {
prop: 'value',
event: 'change'
handleDelete(file) {
//如有需要新增 删除逻辑
console.log(file)
},
handlePreview(file) {
if (file && file.url) {
const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
// let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
window.open(url)
}
},
getFileUrl(fileId) {
return `${window._CONFIG['domianURL']}/sys/common/download/${fileId}`
},
/**
* 通过文件的id获取文件的相关信息
* @param id
*/
getFileInfo(id) {
return new Promise(resolve => {
let result = {}
getFileInfo({id: id}).then(res => {
if (res.success) {
result = res.result
}
}).finally(() => {
resolve(result)
})
})
}
},
mounted() {
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style lang="less">
.uploadty-disabled{
.ant-upload-list-item {
.anticon-close{
display: none;
}
.anticon-delete{
display: none;
}
.uploadty-disabled {
.ant-upload-list-item {
.anticon-close {
display: none;
}
.anticon-delete {
display: none;
}
}
}
</style>
+2 -2
View File
@@ -76,7 +76,7 @@ module.exports = {
},
devServer: {
port: 3000,
port: 21825,
proxy: {
/* '/api': {
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
@@ -88,7 +88,7 @@ module.exports = {
},*/
'/jero-boot': {
// ''
target: 'http://localhost:8080', //请求本地 jero-boot后台项目
target: 'http://localhost:21824', //请求本地 jero-boot后台项目
ws: false,
changeOrigin: true,
},