文件上传onUploadProgress使用
api/*** 添加音乐*/export function AddMusics(filelist, conf) {return http.post('/musicManage/addMusic', filelist,conf)}UploadMusic.vue<template><div class="fileupload"><div class="fileupload
·
1.html5的type=file支持多文件上传,只需设置multiple属性即可
<input style="display:none" type="file" id="file" name="file" ref="file" multiple="multiple" @change="fileChange($event)" />
2.通过files属性访问type="file"的上传文件,会返回一个FileList对象,可以根据此对象获取用户上传文件的信息内容,包括文件名name及文件类型MIME类型及size大小。
fileChange(event) {
let filelist = event.target.files;
let formData = new FormData();
if (filelist.length > 0) {
for (let i = 0; i < filelist.length; i++) {
formData.append("fileList", filelist[i]);
let filedata = {
name: filelist[i].name.substring(0, filelist[i].name.length-4),
size: filelist[i].size,
date: filelist[i].lastModified,
percent: 0
};
this.fileUploadList.push(filedata);
}
}
},
3.通过axios的进度条事件onUploadProgress获取上传文件的进度,显示进度信息。
let config = {
timeout: 120000,//设置超时时长
onUploadProgress: function(progress) {
this.fileUploadList[i].percent = Math.round(
(progress.loaded * 100) / progress.total
);
}.bind(this)
};
调用api
/**
* 添加音乐
*/
export function AddMusics(filelist, conf) {
return http.post('/musicManage/addMusic', filelist,conf)
}
完整代码如下所示
UploadMusic.vue
<template>
<div class="fileupload">
<div class="fileupload-title">
<el-button type="primary" for="file" @click="$refs.file.click()">文件上传</el-button>
<input
style="display:none"
type="file"
id="file"
name="file"
ref="file"
multiple="multiple"
@change="fileChange($event)"
/>
</div>
<div class="fileupload-content">
<el-table :data="fileUploadList" border stripe>
<el-table-column label="文件名称" prop="name"></el-table-column>
<el-table-column label="上传进度">
<template slot-scope="scope">
<div>
<el-progress :status="scope.row.isSuccess==1?'success':scope.row.isSuccess==2?'exception':null" :percentage="scope.row.percent"></el-progress>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { AddMusics } from "../../api/playTaskApi";
import { Message } from "element-ui";
export default {
data() {
return {
fileUploadList: []
};
},
methods: {
fileChange(event) {
let filelist = event.target.files;
let formData = new FormData();
if (filelist.length > 8) {
Message.success({
message: "上传文件个数不能超过8个"
});
return;
}
if (filelist.length > 0) {
for (let i = 0; i < filelist.length; i++) {
formData.append("fileList", filelist[i]);
let filedata = {
name: filelist[i].name.substring(0, filelist[i].name.length-4),
size: filelist[i].size,
date: filelist[i].lastModified,
isSuccess:0,//是否上传成功,0上传中,1成功,2失败
percent: 0
};
this.fileUploadList.push(filedata);
let config = {
timeout: 120000,
onUploadProgress: function(progress) {
this.fileUploadList[i].percent = Math.round(
(progress.loaded * 100) / progress.total
);
}.bind(this)
};
this.uploadFile(formData, config,this.fileUploadList[i]);
}
}
},
uploadFile(formdata, conf,loadItem) {
AddMusics(formdata, conf).then(res => {
if (res.success) {
loadItem.isSuccess=1;
Message.success({
message: "上传成功"
});
}else{
loadItem.isSuccess=2;
Message.warning({
message: "上传失败"
});
}
});
}
}
};
</script>
<style lang="less" scoped>
.fileupload {
display: flex;
flex-direction: column;
.fileupload-title {
display: flex;
justify-content: flex-end;
padding: 5px 0px;
}
.fileupload-content {
flex: 1;
}
}
</style>
更多推荐
已为社区贡献13条内容
所有评论(0)