to make a loading progress bar, can axios, get the time it requested, or is there any easy way to implement
to make a loading progress bar, can axios, get the time it requested, or is there any easy way to implement
progress bars are generally fake.
during the request, the time is unknown, how to determine the percentage?
Axios.interceptors.request.use console.log (+ new Date ()) is the request time, isn't it? Put it in store . Get the end time in
Axios.interceptors.response.use .
but it's all over, and getting time doesn't seem to be of much use. What you need to do is to display the percentage during the request.
you can try this
axios can obtain the upload or download progress. Please see the two methods under the request configuration:
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` allows handling of progress events for downloads
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},I've tried and it's okay. The code I wrote before:
this.axios({
method: 'POST',
url: this.url,
data: fmData,
params: this.params,
transformRequest: function(data) {
return data
},
onUploadProgress: function(progressEvent) {
vm.$nextTick(function() {
if (progressEvent.total === 0) {
vm.percentage = 0
} else {
vm.percentage = Math.round(
progressEvent.loaded * 100 / progressEvent.total
)
}
})
}
})Previous: A problem of Mobile adaptation using flexible.js
Next: Is there any convenient way for nodejs to append a new array to an array in an existing json file?
file-list has multiple values in the upload file upload. How to know the index of the selected value when deleting it ...
shows that vue-router switching to a new view will pop up a large number of such errors ...
first, use the upload component of elementUI to save the file to form.picFile and form.corFile respectively, and then new a FormData object at the time of submission, and then append the file, but there is only one file in the data sent. What is the rea...
the project needs to make a tree-shaped table, as shown in the figure. The page still flows when there is a small amount of data. After importing thousands of pieces of data, it is directly jammed. When you first request to render DOM, you use 3room5s. ...
1. Click the View hide current button and this content to show that another content can. 2. At first, manual display:none, found that after turning the page, the effect of the current cell none on the next page was still there. 3. So I tried to <...
now you need to upload the attachment to the server. The file type can only be processed by doc,png,txt, before it is submitted. the following example is basically picked from the official website of element-ui, because I only need to upload one file, ...
as follows, how to get the value value selected by select when sending a request? <el-form-item> <el-select v-model="team[0].value" size="small"> <el-option v-for="item in team" :label=...
< H1 > element-ui el-radio how can I click to deselect it again when it is already selected? < H1 > <template> <el-radio-group v-model="radio2" @change="onRadioChange"> <el-radio :label="3">&l...
as shown in the figure, when the form is defined and clicked on submit, how to quickly get all the name value similar to jQuery serialize, can not define the name value one by one, and then send the request after the object is stitched together? ...
how to let input display when clicking on a group, click on individual input to hide, (and how to get the value entered by input) <el-radio-group v-model="ruleForm.nature" :change="change"> <el-radio label="&qu...
as shown in the picture, I need to loop small pieces of col. ...
when I make changes to a form, the option from the background is automatically filled in by v-modle. something strange has happened! For the same code, one can be selected automatically, but not the other <el-radio-group v-model="gender"...
problem description 1010: : : vuehtml: : if I remove: key= "index ", I will not report an error, but it should not be so. There is another problem. In the new process, the key name of the v-model binding of the form is the same, so the value ...
The code is as follows. The el-select, in the table is generally set in data after reading the online instructions (for example, risk_type is set to 0), but his initial value in my table is different, how to set this. Tried to set the select binding val...
because firefox does not support window.event s usual solution var evt = window.event | | arguments.callee.caller.arguments [0] Uncaught TypeError: caller , callee , and arguments properties may not be accessed on strict mode functions or...
the element UI tree control (el-tree) is being used in the form of lazy loading (lazy +: load= "loadNode " method). The business is as follows: 1-add a level 1 node 2-any node can add a new child node 3-edit node 4-delete node -(problems encountere...
is ready to add hierarchical splitters to the tree component, which needs to be styled with pseudo classes, but it has no effect. The code is as follows: -sharptree-wrap { .el-tree-node.is-expanded { position: relative; >.el-tree-node__ch...
<el-input style= width:336px;height:20px; placeholder="" v-model="creditCode" @blur="creditInfo" :maxlength=25> < el-input> <el-input style= width:336px;height:20px; ...
is a pop-up window with three select, terminal types, functional modules, and functional subdivisions. The function module comes out only after the terminal is selected, and the function subdivision is the same. The data in is fetched from the list. Be...
a. I made it with vuex. b. Change the value of default-active in the route intercept. c. Get this path from the navigation menu. is fine in theory, but! The current page is not selected until is refreshed. Direct click on the menu is not selected...