[update] 文件上传组件-文件预览的优化
This commit is contained in:
fengchenchen
+303
-292
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user