Commit 82f0eaca authored by liujiangnan's avatar liujiangnan

feat: 进度上传

parent 7b073012
......@@ -2,3 +2,12 @@
.edit-data{
padding: 10px;
}
.upload-progress {
margin-top: 20px;
padding: 10px;
}
.upload-progress .el-button {
margin-top: 10px;
}
\ No newline at end of file
......@@ -8,6 +8,7 @@
<link href="./index.css" rel="stylesheet" >
<script type="text/javascript" src="../lib/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../lib/js/axios.min.js"></script>
<script type="text/javascript" src="../lib/common.js"></script>
<script type="text/javascript" src="../lib/vue.min.js"></script>
......@@ -28,13 +29,21 @@
:on-success="handleCoverSuccess"
:on-error="handleCoverError"
:before-upload="beforeCoverUpload"
:http-request="customUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf/ppt/word文件,且不超过100Mb</div>
</el-upload>
<!-- 添加进度条和取消按钮 -->
<div v-if="uploading" class="upload-progress">
<el-progress :percentage="uploadProgress"></el-progress>
<el-button type="danger" size="small" @click="cancelUpload">取消上传</el-button>
</div>
<br>
<el-link v-if="fileData" :src="fileData.url">{{fileData.name}}</el-link>
<el-link v-if="fileData" :href="fileData.url">{{fileData.name}}</el-link>
</div>
</body>
<script src="./index.js"></script>
......
......@@ -25,9 +25,51 @@ new Vue({
fileData: null,
uploadUrl: window.courseware.uploadUrl(),
uploadCover: window.courseware.uploadData(),
uploading: false,
uploadProgress: 0,
cancelTokenSource: null,
}
},
methods: {
customUpload(options) {
this.uploading = true;
this.uploadProgress = 0;
// 创建 FormData
const formData = new FormData();
formData.append('file', options.file);
// 创建取消令牌
this.cancelTokenSource = axios.CancelToken.source();
// 发起上传请求
axios.post(this.uploadUrl, formData, {
cancelToken: this.cancelTokenSource.token,
onUploadProgress: (progressEvent) => {
this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
},
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
this.handleCoverSuccess(response.data, options.file);
this.uploading = false;
this.cancelTokenSource = null;
}).catch(error => {
if (axios.isCancel(error)) {
console.log('上传已取消');
} else {
this.handleCoverError(error);
}
this.uploading = false;
this.cancelTokenSource = null;
});
},
cancelUpload() {
if (this.cancelTokenSource) {
this.cancelTokenSource.cancel('用户取消上传');
}
},
handleCoverSuccess(response, file, fileList) {
if(response.msg==="error"){
this.$message.error('文件上传失败!');
......@@ -45,6 +87,11 @@ new Vue({
this.$message.error('文件上传失败!');
},
beforeCoverUpload(file) {
// 如果正在上传,则不允许新的上传
if (this.uploading) {
this.$message.warning('请等待当前文件上传完成或取消上传');
return false;
}
const isOffice = (file.type === 'application/pdf' || file.type.indexOf(`application/vnd.openxmlformats`) == 0);
const isLt2M = file.size / 1024 / 1024 / 1024 < 2;
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment