<template>
|
<el-upload
|
v-model:file-list="fileList"
|
:disabled="disabled"
|
:http-request="uploadSectionFile"
|
list-type="picture-card"
|
:on-preview="handlePictureCardPreview"
|
:on-remove="handleRemove"
|
:on-success="successFile"
|
:on-error="errorFile"
|
>
|
<el-icon><Plus /></el-icon>
|
</el-upload>
|
|
<el-dialog v-model="dialogVisible">
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
</el-dialog>
|
</template>
|
<script lang="ts">
|
import axios from 'axios';
|
import { ref, defineComponent,onMounted,watch } from 'vue';
|
import { Plus } from '@element-plus/icons-vue';
|
import type { UploadProps, UploadUserFile } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
import { goalManagementApi } from '/@/api/goalManagement';
|
|
export default defineComponent({
|
props: {
|
// svg 图标组件名字
|
fileList: {
|
type: Array,
|
},
|
disabled: {
|
type: Boolean,
|
default: () => false,
|
},
|
systemName: {
|
type: String,
|
default: () => '',
|
},
|
},
|
components: {
|
Plus,
|
},
|
setup(props, { emit }) {
|
const dialogImageUrl = ref('');
|
const dialogVisible = ref(false);
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
console.log(uploadFile, uploadFiles);
|
};
|
|
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
alert(1)
|
dialogImageUrl.value = uploadFile.url;
|
dialogVisible.value = true;
|
};
|
|
const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
console.log(response, uploadFile, uploadFiles);
|
};
|
const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
console.log(error, uploadFile, uploadFiles);
|
};
|
watch(props.fileList, (val) => {
|
viewList.value = val
|
// searchFile()
|
});
|
onMounted(() => {
|
if(props.fileList){
|
viewList.value = props.fileList
|
// searchFile()
|
}else {
|
viewList.value = []
|
}
|
|
});
|
const newFileList = ref([])
|
const viewList = ref([])
|
const searchFile = async () => {
|
for(var a = 0;a<props.fileList.length;a++){
|
await goalManagementApi()
|
.searchFile(props.fileList[a].fileName)
|
.then((res) => {
|
props.fileList[a].url = res.data
|
})
|
}
|
};
|
const uploadSectionFile = (param) => {
|
let form = new FormData();
|
form.append('file', param.file);
|
//组装文件名（传入后缀名）
|
var fileName1 = getFileName(param.file.type.split('/')[1], 1);
|
var fileName2 = getFileName(param.file.type.split('/')[1], 2);
|
goalManagementApi()
|
.beforeUploadFile(fileName1, fileName2)
|
.then((res) => {
|
// 转换形式
|
const reader = new FileReader();
|
reader.readAsArrayBuffer(param.file);
|
// 上传图片
|
reader.onload = () => { // 上传图片接口 url:上传图片地址 修改请求头
|
axios.put(res.data.uploadUrl, reader.result,
|
{
|
header:
|
{ "Content-Type": "multipart/form-data" }
|
}
|
)
|
.then(res1 =>
|
{
|
props.fileList[props.fileList.length-1].fileName=res.data.fileName
|
props.fileList[props.fileList.length-1].fileUrl=''
|
emit('successUploader',props.fileList);
|
ElMessage({
|
showClose: true,
|
message: '上传成功',
|
type: 'success',
|
});
|
})
|
};
|
});
|
};
|
const getFileName = (suffix, type) => {
|
var projectName = props.systemName;
|
var date = getNowDate();
|
var fileName1 = projectName + '/' + date + '_';
|
var fileName2 = '.' + suffix;
|
if (type == 1) {
|
return fileName1;
|
} else if (type == 2) {
|
return fileName2;
|
}
|
return '';
|
};
|
|
//获取当前年月日
|
const getNowDate = () => {
|
var a = new Date().getTime(); //获取到当前时间戳
|
var now = new Date(a); //创建一个指定的日期对象
|
var year = now.getFullYear(); //年份
|
var month = now.getMonth() + 1; //月份（0-11）
|
var date = now.getDate(); //天数（1到31）
|
return year + '-' + month + '-' + date;
|
};
|
|
return {
|
dialogImageUrl,
|
dialogVisible,
|
handleRemove,
|
handlePictureCardPreview,
|
successFile,
|
errorFile,
|
uploadSectionFile,
|
viewList
|
};
|
},
|
});
|
</script>
|
