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
<template>
<el-form enctype="multipart/form-data">
选择多文件：
<input type="file" name="files" multiple="multiple" @change="getFiles($event)" />
<br />选择文件夹：
<input @change="getFiles($event)" type="file" name="files" webkitdirectory mozdirectory />
<br />
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-ready" v-for="(item, i) in files" :label="item.name" :value="item.name" :key="i">
{{item.name}}
<span>
<el-button size="mini" type="text">
<i @click="remove(item)" class="el-icon-close"></i>
</el-button>
</span>
</li>
</ul>
<el-button size="medium" type="success" @click.stop="upload">上传到服务器</el-button>
</el-form>
</template>
<script>
import axios from "axios";
export default {
name: "UploadFileVue",
props:{
fileList:{
type:Array,
default:[]
},
},
data() {
return {
fullscreenLoading: false,
files: [
]
};
},
watch: {
fileList(newName, oldName) {
console.log(newName)
this.files = newName
// ...
}
},
computed: {
headers() {
return {
Authorization: localStorage.getItem("backToken") || ""
};
}
},
methods: {
remove(data) {
const children = this.files;
const index = children.findIndex(d => d.name === data.name);
children.splice(index, 1);
},
getFiles: function(event) {
console.log(event);
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
this.files.push(files[i]);
}
console.log(this.files, "--");
},
upload: function() {
const loading = this.$loading({
lock: true,
text: '上传中，请稍候。。。',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
console.log(this.files);
var formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
formData.append("file", this.files[i]);
}
console.log(formData);
let _this = this;
_this
.$https(
{
method: "post",
url: "file/video/content/upload",
authType: this.backToken
},
formData
)
.then(res => {
loading.close();
let resData = res.data;
console.log(res);
if (resData.resultCode == "200") {
_this.$message.success("上传成功！");
const data = resData.data.fileList;
let newArray = data.map((item) => item.id);
let editArray =[]
if(this.files.length){
editArray = this.files.map(item=>item.id)
}
this.$emit("videoList", [...newArray,...editArray]);
} else {
_this.$message.error(resData.msg || resData.message);
}
})
.catch(err => {
console.log(err);
_this.$message.error(err.msg || err.message);
});
}
}
};
</script>
<style>
</style>