vue+el-upload上传多文件,上传中删除,更换和删除
html:<el-form-item label="" style="width: 960px;"><span slot="label"><span style="color:red;">*</span>音频内容</span><el-upload :action="uploadAudioUrl":headers="uploadHea
·
html:
<el-form-item label="" style="width: 960px;">
<span slot="label"><span style="color:red;">*</span>音频内容</span>
<el-upload :action="uploadAudioUrl"
:headers="uploadHeaders"
:show-file-list="false"
accept=".mp3"
:on-progress="handleUploadContentAudioProcess"
:on-success="handleUploadContentAudioSuccess"
multiple
ref="audioListUpload1"
style="width: 100px;display: inline-block;">
<el-button size="small" type="primary" @click="isClick='add'">添加音频</el-button>
<div class="el-form-item__error" style="position: relative" v-if="showErr">请上传音频内容</div>
</el-upload>
<el-button type="primary" size="small" @click="sortByList()" style="display: inline-block;position: absolute">
排 序
</el-button>
<div style="margin-top: 10px;">
<el-table :data="contentList" border stripe size="mini">
<el-table-column label="序号" type="index" align="center" width="100">
<template slot-scope="scope">
<el-select :value="scope.$index+1" size="mini"
@change="((newSequence)=>{changeContentImageSequence(scope.$index+1, newSequence)})">
<el-option v-for="index in contentList.length"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="音频名称" prop="name">
<template slot-scope="scope">
<div>
<el-popover placement="right"
trigger="hover"
v-if="scope.row.path != null && scope.row.path !== ''">
<audio class="video" height="400"
:src="contentBaseUrl + scope.row.path"
controls="controls">您的浏览器不支持 audio 标签。
</audio>
<el-button type="text" slot="reference">{{ scope.row.name}}</el-button>
</el-popover>
<div v-else>{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="标题" width="400" prop="episodeTitle">
<template slot-scope="scope">
<div v-if="scope.row.status === 'success'">
<el-input v-model="scope.row.episodeTitle" placeholder="请输入音频标题内容"></el-input>
</div>
<el-progress :percentage="getPercentage(scope.row.percentage)"
v-if="scope.row.status === 'uploading'">
</el-progress>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="deleteAudio(scope.$index)">删除</el-button>
<el-upload style="display: inline-block"
:action="uploadAudioUrl"
:headers="uploadHeaders"
:show-file-list="false"
accept=".mp3"
:on-progress="handleChangeContentAudioProcess(scope.$index)"
:on-success="handleChangeContentAudioSuccess(scope.$index)"
multiple
ref="audioListUpload">
<el-button size="mini" type="primary" @click="isClick='update'">更换</el-button>
</el-upload>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
js:
//音频上传
handleUploadContentAudioProcess(event, file, fileList) {
if (file.status === 'fail') {
for (let i = 0; i < this.contentList.length; i++) {
if (this.contentList[i].uid === file.uid) {
this.contentList.splice(i, 1);
break;
}
}
return;
}
let exist = false;
for (let i = 0; i < this.contentList.length; i++) {
if (this.contentList[i].uid === file.uid) {
this.contentList[i] = file;
exist = true;
break;
}
}
if (!exist) {
this.contentList.push(file);
}
},
handleUploadContentAudioSuccess(response, file) {
if (response.code === this.$constant.RESPONSE_CODE_LIST.SUCCESS) {
this.isEpisodeTitleInput = true;
file.path = response.data[0].path;
file.audioName = response.data[0].audioName;
file.totalSeconds = response.data[0].totalSeconds;
let exist = false;
for (let i = 0; i < this.contentList.length; i++) {
if (this.contentList[i].uid === file.uid) {
this.contentList[i] = file;
this.$set(this.contentList[i], 'episodeTitle', file.audioName.split(".")[0]);
exist = true;
break;
}
}
if (!exist) {
this.contentList.push(file);
}
} else if (response.code === this.$constant.RESPONSE_CODE_LIST.TOKEN_INVALID) {
this.$message({
message: response.message,
type: "error",
duration: 5 * 1000
});
let callback = location.href;
let baseUrl = process.env.UNION_BASE_URL;
let reg = new RegExp("\/$");
if (reg.test(process.env.UNION_BASE_URL)) {
baseUrl = process.env.UNION_BASE_URL.substring(0, process.env.UNION_BASE_URL.length - 1);
}
location.href = baseUrl + "/login?systemId=" + response.data.systemId
+ "&callback=" + encodeURIComponent(callback);
} else {
this.$message({
message: response.message,
type: "error",
duration: 5 * 1000
});
}
},
//更换已上传的
handleChangeContentAudioProcess(index) {
return (function (event, file, fileList) {
if (file.status === 'fail') {
this.contentList.splice(index, 1);
return;
}
this.isEpisodeTitleInput = false;
this.contentList.splice(index, 1, file);
}).bind(this);
},
handleChangeContentAudioSuccess(index) {
return (function (response, file, fileList) {
if (response.code === this.$constant.RESPONSE_CODE_LIST.SUCCESS) {
this.isEpisodeTitleInput = true;
file.path = response.data[0].path;
file.audioName = response.data[0].audioName;
file.totalSeconds = response.data[0].totalSeconds;
this.contentList.splice(index, 1, file);
this.$set(this.contentList[index], 'episodeTitle', file.audioName.split(".")[0]);
} else if (response.code === this.$constant.RESPONSE_CODE_LIST.TOKEN_INVALID) {
this.$message({
message: response.message,
type: "error",
duration: 5 * 1000
});
let callback = location.href;
let baseUrl = process.env.UNION_BASE_URL;
let reg = new RegExp("\/$"); // eslint-disable-line
if (reg.test(process.env.UNION_BASE_URL)) {
baseUrl = process.env.UNION_BASE_URL.substring(0, process.env.UNION_BASE_URL.length - 1);
}
location.href = baseUrl + "/login?systemId=" + response.data.systemId
+ "&callback=" + encodeURIComponent(callback);
} else {
this.$message({
message: response.message,
type: "error",
duration: 5 * 1000
});
}
}).bind(this);
},
//上传进度
getPercentage(percentage) {
return Number(percentage.toFixed(0));
},
//删除操作
deleteAudio(index) {
this.$confirm("确认删除音频文件吗?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(() => {
//判断当前文件状态是否 在上传中,
if (this.contentList[index].status == 'uploading') {
//是新增上传,或是更换上传处理判断,
if (this.isClick == 'add') {
this.$refs.audioListUpload1.abort(this.contentList[index]);
} else if (this.isClick == 'update') {
this.$refs.audioListUpload.abort(this.contentList[index]);
}
}
this.contentList.splice(index, 1);
}).catch(() => {
return;
});
},
//自然排序排序
sortByList() {
if (this.contentList.length <= 1) {
return
}
let episodeTitleList = [];
for (let j = 0; j < this.contentList.length; j++) {
episodeTitleList[j] = this.contentList[j].episodeTitle;
}
this.$http.post("/api/common/upload/batch/order", {}, {
strings: episodeTitleList,
type: 0
}).then(response => {
let list = response.data;
let newlist = [];
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < this.contentList.length; j++) {
if (list[i] == this.contentList[j].episodeTitle) {
newlist[i] = this.contentList[j];
}
}
}
this.contentList = newlist;
});
},
更多推荐
已为社区贡献1条内容
所有评论(0)