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
<template>
<div>
<!-- accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" -->
<!-- :show-file-list="false" -->
<!-- :file-list="fileList" -->
<!-- action="http://192.168.110.67/mall/file/video/content/upload" -->
<el-upload
ref="upload"
:multiple="true"
:http-request="uploadFile"
:file-list="fileList"
action
:auto-upload="false"
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-plus fileUpload"></i>
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</div>
</template>
<script>
export default {
data() {
return {
filedata:[],
fileArr: [],
fileList:[],
// fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
submitUpload() { // 导入
let tempData = this.filedata
this.filedata = new FormData() // 用FormData存放上传文件
this.$refs.upload.submit() // 会循环调用uploadFile方法，多个文件调用多次
let _this = this;
_this
.$https(
{
method: "post",
url: "file/video/content/upload",
authType: this.backToken
},
this.filedata
)
.then(res => {
let resData = res.data;
console.log(res)
if (resData.resultCode == "200") {
// alert("上传成功");
console.log(resData.data.fileList)
const data = resData.data.fileList
console.log(data)
let newArray = data.map((item) => {
return item.id;
})
this.$emit('videoList', newArray)
} else {
_this.$message.error(resData.msg || resData.message);
}
})
.catch(err => {
console.log(err);
_this.$message.error(err.msg || err.message);
});
},
uploadFile(file) {
this.filedata.append('file', file.file)
},
beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error("上传文件大小不能超过 5MB!");
}
return isLt5M;
},
handleRequest(file) {
// let formData = new FormData();
// this.fileArr.push(file.file)
// console.log(this.fileArr,'文件数组')
// formData.append("file", this.fileArr);
let formData = new FormData();
if (Array.isArray(file)) {
file.forEach(item => {
formData.append("file", item.file);
});
} else {
formData.append("file", file.file);
}
let _this = this;
_this
.$https(
{
method: "post",
url: "file/video/content/upload",
authType: this.backToken
},
formData
)
.then(res => {
let resData = res.data;
if (resData.resultCode == 200) {
alert("上传成功");
// _this.getOrgTree();
} else {
_this.$message.error(resData.msg || resData.message);
}
})
.catch(err => {
console.log(err);
_this.$message.error(err.msg || err.message);
});
}
}
};
</script>
<style>
.fileUpload {
width: 148px;
height: 148px;
line-height: 148px;
margin: 0 auto;
border: 1px dashed #c0ccda;
font-size: 24px;
font: #ccc;
}
</style>