Content Table

Ajax 异步上传文件

异步上传

先选择文件,然后点击上传按钮使用 Ajax 异步的方式上传文件,代码如下:

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
<template>
<div class="about">
<input ref="fileElem" type="file" accept="image/jpeg"><br><br>
<Button type="primary" :loading="loading" @click="upload">上传文件</Button>
</div>
</template>

<script>
export default {
data() {
return {
file: null,
loading: false,
};
},
mounted() {
// 选择文件的事件处理
this.$refs.fileElem.addEventListener('change', () => {
this.file = this.$refs.fileElem.files[0];
});
},
methods: {
upload() {
this.loading = true;
var formData = new FormData();
formData.append('file', this.file, this.file.name);

uploadFile('/form/upload/temp/file', formData).then(response => {
console.log(response);
this.loading = false;
}).catch(error => {
console.error(error);
this.loading = false;
});
}
},
};

/**
* 上传文件
*
* @param {String} url 上传地址
* @param {JSON} formData 表单数据
*/
function uploadFile(url, formData) {
return new Promise((resolve, reject) => {
axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => {
// 提示: 响应部分根据使用的服务器端的响应结果进行简单调整
if (response.data.success) {
const uplaodedFile = response.data.data;
resolve(uplaodedFile);
} else {
reject(response.data.message);
}
}).catch(response => {
const error = response.response;
console.error(error);
reject(error);
});
});
}
</script>

上传按钮样式

HTML 中使用 <input type="file"> 选择文件,但是他的样式不好看,可以定义一个按钮,点击后弹出选择文件的对话框:

  • 把 button 和 input 放在同一个 div 中
  • 设置 button 的样式为我们期望的上传按钮的样式
  • input 覆盖在 button 上,并且与 button 一样大,看上去点击的是 button,实际点击的是选择文件的 input
  • input 设置为透明的,这样可以看到它背后的 button

效果图:

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.upload-button {
position: relative;
display: inline-block;
}

.upload-button button {
width: 100px;
height: 40px;
border-radius: 4px;
background-color: #00bfff;
border: none;
font-size: 16px;
}

.upload-button input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: 0; /* 设置为 0.6 就明白原理了 */
}
</style>
</head>
<body>
<input type="file" accept="image/jpeg">

<!-- 自定义的上传按钮 -->
<div class="upload-button">
<button>上传</button>
<input id="file" type="file" accept="*/*">
</div>

<div id="info">1</div>

<script>
// 选择文件的事件处理
var file = document.querySelector('#file');
file.addEventListener("change", function() {
var curFile = file.files;
document.querySelector('#info').innerHTML = curFile[0].name;
});
</script>
</body>
</html>