通过构建一个 html 的文件上传模板进行文件上传对接口进行测试；
之前测试RFC1867协议的文件上传也是通过 html 进行文件上传模板进行测试，但是由于每次对不同的借口进行文件上传测试都需要打开一下文本编辑，然后在修改，真的很麻烦，所以就产生了以下的内容；
通过加入输入框输入接口 URL 和自定义请求头防止需要低权限认证的情况，基本解决了大部分的问题，还有小部分的问题就是RFC1867协议自定义 POST 数据的情况没有解决，且不是很好解决，还是得抓包进行修改才行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文件上传demo</title>
<style>
.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="submit"] {
background: #007bff;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
width: 100%;
}
.form-control {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 5px;
}
textarea.form-control {
height: 100px;
resize: vertical;
font-family: monospace;
}
input::placeholder,
textarea::placeholder {
color: #999;
}
</style>
</head>
<body>
<div class="container">
<h2>文件上传表单</h2>
<form id="uploadForm">
<div class="form-group">
<label for="apiUrl">接口地址：</label>
<input id="apiUrl"
class="form-control"
placeholder="请输入接口URL（示例：https://example.com/upload）">
</div>
<div class="form-group">
<label for="headers">请求头：</label>
<textarea id="headers"
class="form-control"
placeholder="每行一个请求头，格式：HeaderName: Value 示例： Authorization: Bearer your_token Content-Type: multipart/form-data"></textarea>
</div>
<div class="form-group">
<label for="file">选择文件：</label>
<input type="file"
id="file"
name="file"
class="form-control"
required>
</div>
<input type="submit" value="上传文件">
</form>
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
const apiUrl = document.getElementById('apiUrl').value;
const headersInput = document.getElementById('headers').value;
const fileInput = document.getElementById('file');
const file = fileInput.files[0];
if (!apiUrl) {
alert('请输入接口地址');
return;
}
if (!file) {
alert('请选择要上传的文件');
return;
}
const headers = new Headers();
headersInput.split('\n').forEach(line => {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
const value = valueParts.join(':').trim();
headers.append(key.trim(), value);
}
});
const formData = new FormData();
formData.append('file', file);
fetch(apiUrl, {
method: 'POST',
headers: headers,
body: formData
})
.then(response => {
if (!response.ok) {
return response.text().then(text => {
throw new Error(`上传失败：${response.status} - ${text}`);
});
}
return response.json();
})
.then(data => {
alert('上传成功');
console.log('响应数据:', data);
})
.catch(error => {
alert(error.message);
console.error('错误详情:', error);
});
});
</script>
</body>
</html>
|