upload.vue
2.67 KB
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
<template>
<div class="upload">
<form ref="form" @change="upload">
<input :id="inputId" type="file" name="filename" accept="image/*">
</form>
</div>
</template>
<script>
const $ = require('yoho-jquery');
const modal = require('js/plugin/modal2');
const tip = require('js/plugin/tip');
module.exports = {
props: ['imageList', 'bucket'],
data() {
return {
inputId: 'input-' + Math.floor(Math.random() * 999999999) // 尽可能保证 input ID 唯一
};
},
methods: {
upload(e) {
const formData = new FormData(this.$refs.form);
formData.append('bucket', this.bucket || '');
$.ajax({
method: 'POST',
url: '/api/upload/image',
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
}).then(res => {
e.target.value = '';
if (res.code === 200) {
res.data.imagesList.forEach(imagesPath => {
this.imageList.push(imagesPath);
});
} else {
modal.alert(res.message);
}
})
.fail(jqXhr => {
let message;
switch (jqXhr.status) {
case 413:
message = '图片太大了~';
break;
default:
message = '上传出错~';
}
tip.show(message);
});
}
}
};
</script>
<style lang="scss">
/* 每个地方上传按钮可能不一样,使用的时候自己写样式 */
.upload {
position: relative;
border: 1px solid #b0b0b0;
&:after,
&:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 2px;
margin-left: -50px;
margin-top: -1px;
background-color: #b0b0b0;
}
&:before {
transform: rotate(90deg);
}
input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
</style>