132 lines
3.5 KiB
Markdown
132 lines
3.5 KiB
Markdown
# 前端
|
||
|
||
## 问题
|
||
|
||
### vue3 引入@路径
|
||
|
||
#### 引入path模块问题
|
||
|
||
node.js 自带的path模块，是JavaScript代码，要引入ts文件，需要安装@type/node模块。
|
||
|
||
```shell
|
||
npm install @types/node --save-dev
|
||
```
|
||
|
||
之后就可以加载path。在 vite.config.ts 中加上
|
||
|
||
```typescript
|
||
import path from "path";
|
||
resolve: {
|
||
//配置别名
|
||
alias: [
|
||
{
|
||
find: /^~/,
|
||
replacement: "",
|
||
},
|
||
{
|
||
find: "@",
|
||
replacement: path.resolve( __dirname, "src" ),
|
||
},
|
||
],
|
||
},
|
||
```
|
||
|
||
### tomcat 跨域下载文件
|
||
|
||
tomcat 默认是不支持跨域的，不做配置使用vue下载文件会有Access-Control-Allow-Origin问题。
|
||
|
||
解决方法： 编辑 web.xml 文件，找到
|
||
|
||
```xml
|
||
<!-- The mapping for the HTTP header security Filter -->
|
||
```
|
||
|
||
在下面添加
|
||
|
||
```xml
|
||
<filter>
|
||
<filter-name>CorsFilter</filter-name>
|
||
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
|
||
<init-param>
|
||
<param-name>cors.allowed.origins</param-name>
|
||
<param-value>*</param-value>
|
||
</init-param>
|
||
</filter>
|
||
<filter-mapping>
|
||
<filter-name>CorsFilter</filter-name>
|
||
<url-pattern>/*</url-pattern>
|
||
</filter-mapping>
|
||
|
||
```
|
||
|
||
重启 tomcat 解决。
|
||
|
||
## 组件
|
||
|
||
### pdf预览组件
|
||
|
||
使用
|
||
|
||
## 技术
|
||
|
||
### element-plus 文件上传
|
||
|
||
element-plus 文件上传组件的响应函数，作为:on-success属性值。要传递的参数作为:data属性值。
|
||
|
||
```typescript
|
||
import { type FileUploadResponse } from "@/utils/fileUpload.js";
|
||
import { type UploadProps, type UploadFile, type UploadFiles, ElMessage, ElMessageBox } from "element-plus";
|
||
|
||
const onUploadSuccess: UploadProps["onSuccess"] = ( response: FileUploadResponse, uploadFile: UploadFile, uploadFiles: UploadFiles ): void =>
|
||
{
|
||
// 先判断成功标志位
|
||
if ( response.success )
|
||
{
|
||
// 成功，发出导入报表请求
|
||
if ( response.fileList.length === 0 )
|
||
{
|
||
// 上传文件路径有问题，提示一下
|
||
ElMessageBox.confirm(
|
||
"上传文件的保存路径有误，请联系开发人员。",
|
||
"上传文件错误",
|
||
{
|
||
confirmButtonText: "确定",
|
||
type: "warning",
|
||
center: true,
|
||
}
|
||
)
|
||
.then((): void => {})
|
||
.catch((): void => {});
|
||
}
|
||
|
||
const request: ImportBIReportRequest = {
|
||
filePath: response.fileList[0],
|
||
reportType: ui.selectedReportType,
|
||
firstRow: ui.firstRow,
|
||
sheetIndex: ui.sheetIndex,
|
||
};
|
||
|
||
console.log( "请求参数", request );
|
||
|
||
// 发出请求
|
||
importBIReport( request, importResponseHandler );
|
||
}
|
||
else
|
||
{
|
||
// 失败了，提示一下
|
||
ElMessageBox.confirm(
|
||
response.message,
|
||
"上传文件错误",
|
||
{
|
||
confirmButtonText: "确定",
|
||
type: "warning",
|
||
center: true,
|
||
}
|
||
)
|
||
.then((): void => {})
|
||
.catch((): void => {});
|
||
}
|
||
};
|
||
```
|
||
|