http-request 覆蓋預設的上傳行為,自定義上傳的實現
阿新 • • 發佈:2019-02-12
表單中的 ui
<el-form-item label="課程檔案" :label-width="formLabelWidth">
<el-upload
:show-file-list="false"
:file-list="playUrls"
:http-request="uploadSectionFile"> <!--此處使用自定義上傳實現http-request-->
<el-button size="small" type="primary" >點選上傳</el-button>
<el-tag v-show="showSectionFileName" type="gray">{{sectionFileName}}</el-tag>
<div slot="tip" class="el-upload__tip">請等待進度條100%之後再提交表單</div>
</el-upload>
<el-progress v-show="showProgress" :text-inside="true" :stroke-width ="18"
:percentage="uploadPercent"></el-progress>
</el-form-item>
http-request
指向的函式會有一個element 的預設回撥引數
定義為param.裡面包含很多東西,可以自己debug檢視
param.file
就是要上傳的檔案
uploadSectionFile: function (param) { //自定義檔案上傳
var fileObj = param.file;
// 接收上傳檔案的後臺地址
var FileController = "/file/item/upload" ;
// FormData 物件
var form = new FormData();
// 檔案物件
form.append("file", fileObj);
// 其他引數
form.append("xxx", xxx);
// XMLHttpRequest 物件
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.upload.addEventListener("progress", vm.progressFunction, false); //監聽上傳進度
xhr.onload = function () {
vm.Form.playUrl = xhr.response; //接收上傳到阿里雲的檔案地址
vm.$message({
message: '恭喜你,上傳成功!',
type: 'success'
});
};
xhr.send(form);
},
監聽上傳進度中指定的函式,此函式在上傳過程中會一直執行,所以通過
i
來控制只執行一次
progressFunction: function () {
if (vm.i == 0) { //控制上傳中狀態只執行一次上傳
vm.showStatus();
vm.showProgress = true;
vm.i = 1;
}
},
定時查詢上傳進度
uploadPercent
是上傳進度
showStatus: function () {
var intervalId = setInterval(function () {
$.get("/file/item/percent", {}, function (data) {
var percent = data;
if (percent >= 100) {
clearInterval(intervalId);
percent = 100;//不能大於100
vm.uploadPercent = percent;
vm.resetPercent(); //在文章開頭的上篇文章中有此函式,用於重置後臺的上傳進度
}
vm.uploadPercent = percent;
}, "json");
}, 1000);
},