Commit 82f0eaca authored by liujiangnan's avatar liujiangnan

feat: 进度上传

parent 7b073012
.edit-data{ .edit-data{
padding: 10px; 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 @@ ...@@ -8,6 +8,7 @@
<link href="./index.css" rel="stylesheet" > <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/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/common.js"></script>
<script type="text/javascript" src="../lib/vue.min.js"></script> <script type="text/javascript" src="../lib/vue.min.js"></script>
...@@ -28,13 +29,21 @@ ...@@ -28,13 +29,21 @@
:on-success="handleCoverSuccess" :on-success="handleCoverSuccess"
:on-error="handleCoverError" :on-error="handleCoverError"
:before-upload="beforeCoverUpload" :before-upload="beforeCoverUpload"
:http-request="customUpload"
> >
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf/ppt/word文件,且不超过100Mb</div> <div class="el-upload__tip" slot="tip">只能上传pdf/ppt/word文件,且不超过100Mb</div>
</el-upload> </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> <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> </div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
......
...@@ -25,9 +25,51 @@ new Vue({ ...@@ -25,9 +25,51 @@ new Vue({
fileData: null, fileData: null,
uploadUrl: window.courseware.uploadUrl(), uploadUrl: window.courseware.uploadUrl(),
uploadCover: window.courseware.uploadData(), uploadCover: window.courseware.uploadData(),
uploading: false,
uploadProgress: 0,
cancelTokenSource: null,
} }
}, },
methods: { 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) { handleCoverSuccess(response, file, fileList) {
if(response.msg==="error"){ if(response.msg==="error"){
this.$message.error('文件上传失败!'); this.$message.error('文件上传失败!');
...@@ -45,6 +87,11 @@ new Vue({ ...@@ -45,6 +87,11 @@ new Vue({
this.$message.error('文件上传失败!'); this.$message.error('文件上传失败!');
}, },
beforeCoverUpload(file) { beforeCoverUpload(file) {
// 如果正在上传,则不允许新的上传
if (this.uploading) {
this.$message.warning('请等待当前文件上传完成或取消上传');
return false;
}
const isOffice = (file.type === 'application/pdf' || file.type.indexOf(`application/vnd.openxmlformats`) == 0); const isOffice = (file.type === 'application/pdf' || file.type.indexOf(`application/vnd.openxmlformats`) == 0);
const isLt2M = file.size / 1024 / 1024 / 1024 < 2; 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