前端代码
<template>
<el-upload
ref="uploadv"
class="upload-demo"
action="a"
:on-change="handleChange"
:file-list="videolist"
:http-request="uploadFile"
:auto-upload="false"
>
<template #trigger>
<el-button type="primary">选择文件</el-button>
</template>
<el-button class="ml-3" type="success" @click="submitUpload">上传到服务器</el-button>
<template #tip>
<div class="el-upload__tip" style="color: red">
选择视频
</div>
</template>
</el-upload>
</template>
<script>
import axios from "axios";
export default({
data(){
return{
videolist:[]
}
},
methods: {
handleChange(file, fileList){
this.videolist = fileList;
},
submitUpload(){
this.$refs.uploadv.submit();
let data = new FormData();
let config = []
this.videolist.forEach(
(val, index) => {
// 这里添加的 key 相同, FormData会自动转换为文件列表
data.append('filename', val.raw);
}
);
axios.post('url', data).then((response)=>{
if(response.status == 201)
{
// 上传成功
this.videolist = []
}
})
},
uploadFile(){
}
}
})
</script>
后端代码
def methods(request):
# 文件列表
file_list = request.FILES.getlist('filename')
for i in file_list:
models.objects.create(file=i)
版权声明:本文为loserccc原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。