<template>
|
<div class="upload-container" style="display: flex;justify-content: space-between;align-items: center">
|
<el-input :disabled="true" type="text" size="medium" v-model="viewName" style="width: auto;min-width: 40%;max-width: 100%;display: flex;align-items: center" ></el-input>
|
<el-button slot="tip" v-if="disabled && fileName" type="primary" size="mini" style="margin-left: 5px">
|
<a @click="downLoadFile(downloadUrl)">下载<i class="el-icon-download el-icon--right"></i></a>
|
</el-button>
|
<el-upload
|
v-if="!disabled"
|
class="upload"
|
action=""
|
multiple
|
:limit="1"
|
:file-list="fileList"
|
:http-request="uploadSectionFile"
|
:show-file-list="false"
|
:before-upload="beforeUpload"
|
:on-success="uploadSuccess"
|
:on-error="uploadError"
|
|
>
|
<div style="display: flex;justify-content: flex-end;">
|
<el-button v-if="!fileName" type="primary" size="mini" style="margin-left:25px;">上传<i class="el-icon-upload el-icon--right"></i></el-button>
|
</div>
|
</el-upload>
|
<div style="display: flex;align-items: center;justify-content: center;">
|
<a @click="downLoadFile(downloadUrl)" v-if="!disabled&&fileName">
|
<el-button slot="tip" type="primary" size="mini" style="margin-left:5px;width:65px">
|
下载<i class="el-icon-download el-icon--right"></i>
|
</el-button>
|
</a>
|
<el-button v-if="!disabled&&fileName" slot="tip" type="primary" size="mini" @click="handleClear" style="margin-left:5px;height:28px;width:65px"
|
>清除<i class="el-icon-delete el-icon--right"></i
|
></el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import download from '@/api/uploadUrl';
|
import axios from 'axios';
|
import { Loading } from 'element-ui';
|
import defaultUrl from "@/api/defaultUrl";
|
export default {
|
props: {
|
name: {
|
type: String
|
},
|
url: {
|
type: String
|
},
|
disabled: {
|
type: Boolean
|
},
|
assetPackageSn:{
|
type:String
|
}
|
},
|
data() {
|
return {
|
drawer:false,
|
progress:"0%",
|
viewName:'',
|
download: download,
|
defaultUrl:defaultUrl,
|
fileName: '',
|
filePath: '',
|
downloadUrl: '',
|
fileList: [],
|
action: '',
|
fileData: '',
|
fileType: ''
|
};
|
},
|
mounted() {
|
setTimeout(() => {
|
this.fileName = this.$props.name;
|
this.downloadUrl = this.$props.url;
|
this.viewName=this.$props.name
|
}, 100);
|
},
|
watch: {
|
name() {
|
this.fileName = this.$props.name;
|
this.downloadUrl = this.$props.url;
|
this.viewName=this.$props.name;
|
}
|
},
|
methods: {
|
downLoadFile(fileUrl){
|
let a = document.createElement('a')
|
a.href =this.defaultUrl+`/api/wisdom/upload/downloadNew?path=`+encodeURI(fileUrl)
|
a.click();
|
|
},
|
uploadSectionFile(param) {
|
let form = new FormData();
|
var that = this;
|
form.append('file', param.file);
|
form.append('dir', 'temp1');
|
form.append("assetPackageSn",this.$props.assetPackageSn)
|
var config = {
|
onUploadProgress: progressEvent => {
|
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) ;
|
var num//=complete+"%"
|
if(complete>98){
|
this.progress=98+"%"
|
num=98+"%"
|
}else {
|
this.progress = complete+"%"
|
num=complete+"%"
|
}
|
this.loading.setText(num);
|
}
|
}
|
axios.post(this.defaultUrl+`/api/wisdom/upload/uploadNew`,
|
form, config).then(res =>{
|
if (res.data.result) {
|
this.loading.setText(100+"%");
|
this.progress=100+"%"
|
this.fileName = res.data.data.fileName;
|
this.viewName=res.data.data.fileName;
|
this.downloadUrl=res.data.data.fileUrl
|
this.$nextTick(() => {
|
this.$emit('uploadSuccess', {
|
fileName: res.data.data.fileName,
|
fileUrl: res.data.data.fileUrl
|
});
|
});
|
this.loading.close();
|
this.$message("上传成功", 'success');
|
}else {
|
this.loading.close();
|
this.$message.error("上传失败");
|
}
|
this.loading.close();
|
})
|
},
|
beforeUpload(file) {
|
const options = {
|
text: "0%",
|
spinner: 'el-icon-loading',
|
lock: true,
|
background: 'rgba(0, 0, 0, 0.7)'
|
};
|
this.loading = Loading.service(options);
|
},
|
uploadSuccess(response, file, fileList) {
|
this.filePath = response.data;
|
this.fileName = response.data;
|
this.downloadUrl = `${window.location.origin}/api/wisdom/file/download?filePath=${response}`;
|
this.fileList = fileList;
|
this.$message(this.$t('zjl.tips.sccg'), 'success');
|
this.$emit('uploadSuccess', {
|
fileUrl: response.data
|
});
|
},
|
uploadError(err, file, fileList) {
|
this.$message(this.$t('zjl.tips.scsb'), 'error');
|
},
|
async handleClear() {
|
this.fileName = '';
|
this.fileList = [];
|
this.viewName=""
|
this.progress=0
|
this.$emit('uploadSuccess', {
|
fileUrl: '',
|
fileName: ''
|
});
|
/*deleteFile({
|
filePath: this.filePath,
|
fileType: this.fileType
|
});
|
|
return false;*/
|
}
|
}
|
};
|
</script>
|
|
<!--<style lang="scss" scoped>
|
.upload-container {
|
display: flex;
|
justify-content: space-between;
|
|
.upload {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
</style>-->
|
<style scoped>
|
::v-deep .el-input__inner{
|
height:40px;
|
line-height:40px;
|
margin-bottom: 10px;
|
}
|
</style>
|
