144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<wp-upload :key="key" :url="uploadUrl"
|
|
:file-list="hxfileList"
|
|
:max-file-number="maxnum"
|
|
:allow-files="allowfiles"
|
|
:upload-auto="true"
|
|
upload-file-param="file"
|
|
@on-delete="onDelete"
|
|
@docexcel-preview="docexcelPreview"
|
|
@on-upload-after="uploadAfter">
|
|
</wp-upload>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const METHOD_NAME = "change"
|
|
|
|
module.exports = {
|
|
props: {
|
|
filex: {
|
|
type: String
|
|
},
|
|
resfile: {
|
|
type: 'Object',
|
|
default: () => {
|
|
}
|
|
},
|
|
allowfiles: {
|
|
type: 'Array',
|
|
default: () => []
|
|
},
|
|
maxnum: {
|
|
type: [String, Number]
|
|
}
|
|
},
|
|
watch: {
|
|
filex: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.hxfileList.push({url: val})
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
resfile(val) {
|
|
this.hxfileList = [{url: FILE_DOMAIN + val}]
|
|
this.key = Math.random()
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
key: Math.random(),
|
|
uploadUrl: '/platform/Common/uploadFile',
|
|
fileList: [],
|
|
filePath: '',
|
|
hxfileList: []
|
|
}
|
|
},
|
|
methods: {
|
|
uploadAfter({data, fileId}) {
|
|
if (data && data.code === 0) {
|
|
//fileId 文件的唯一ID 组件生成
|
|
this.resfile = {...data.data, fileId}
|
|
this.$emit('update:resfile', this.resfile.filepath)
|
|
}
|
|
},
|
|
onDelete(file) {
|
|
if (file.status === 2) {
|
|
for (let index in this.resfile) {
|
|
if (this.resfile[index].fileId === file.id) {
|
|
$.post('/platform/Common/deleteFile', {filepath: this.resfile[index].filepath})
|
|
this.resfile.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
docexcelPreview(id) {
|
|
//61行的fileId
|
|
for (let index in this.resfile) {
|
|
if (this.resfile[index].fileId === id) {
|
|
window.open('/platform/base/Common/preview?filepath=' + this.resfile[index].filepath + '&fileid=' + this.resfile[index].id)
|
|
}
|
|
}
|
|
},
|
|
handleChange(file, fileList) {
|
|
const delFile = () => {
|
|
for (let i = 0; i < fileList.length; i++) {
|
|
for (let i = 0; i < fileList.length; i++) {
|
|
if (file === fileList[i]) {
|
|
fileList.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
if (this.size === 0) {
|
|
this.$message.warning("您选择的是空文件!");
|
|
delFile()
|
|
}
|
|
if (!uploadFileType.includes(file.name.split('.')[1])) {
|
|
this.$message.warning("文件格式不支持!");
|
|
delFile()
|
|
}
|
|
|
|
let formData = new FormData()
|
|
formData.append("file", file.raw, file.raw.name);
|
|
|
|
$.ajax({
|
|
url: "/platform/Common/uploadFile",
|
|
type: "post",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: (res) => {
|
|
const {code, data, msg} = res
|
|
if (code == 0) {
|
|
file.v = data
|
|
//this.$emit(METHOD_NAME, data)
|
|
this.$emit('update:' + METHOD_NAME, data)
|
|
}
|
|
},
|
|
error: res => {
|
|
const {code, data, msg} = res
|
|
this.$message.error(msg);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
handleRemove(file, fileList) {
|
|
if (file.v) {
|
|
$.post('/platform/Common/deleteFile', {filepath: file.v.filepath})
|
|
for (let index in this.resfile) {
|
|
if (this.resfile[index].filepath === file.v.filepath) {
|
|
this.resfile.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |