I mean how do I get a upload component which can choose file and upload file and support support progress call back.
I will wonder if you would give me a example . thanks.
I mean how do I get a upload component which can choose file and upload file and support support progress call back.
I will wonder if you would give me a example . thanks.
i dont think it have.
i implemented my own with f7 + vue + vuex + axios.
uploadFile: (opts, headers) => new Promise((resolve, reject) => {
const token = vue.cookie.get('XXX')
var instance = axios.create({
baseURL: !store.getters.debug ? 'https://my-api' : 'http://localhost:8088/',
timeout: 300000,
headers: {'Content-Type': 'text/raw',
'Authorization': 'Bearer ' + token.headers,
'Bucket-Id': headers.bucketId
}
})
// show base uploader animation
instance.interceptors.request.use(function (config) {
store.commit('TOGGLE_SHOW_UPLOAD_PROGRESS')
return config
})
// hide base uploader animation
instance.interceptors.response.use(function (response) {
store.commit('TOGGLE_SHOW_UPLOAD_PROGRESS')
return response
}, function (error) {
store.commit('TOGGLE_SHOW_UPLOAD_PROGRESS')
return error
})
instance({
method: 'post',
url: 'UploadFile',
data: opts,
// increment uploader animation bar
onUploadProgress: (progressEvent) => {
const { loaded, total } = progressEvent
let progress = parseInt(Math.round((loaded * 100) / total))
store.dispatch('setUploadProgress', progress)
// console.log(parseInt(Math.round((loaded * 100) / total)))
}
}
).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
}),
maybe you can use this code to change it to your needs. you only need axios. i dont know if f7 request method support onUploadProgress or how to use it.
thank u pvtallulah, you are so kind. but I just want to use f7 and vue to implement this function .
<input type="file" @change="uploadAddition" id="ufile" />
uploadAddition: function () {
let that = this;
let $$ = this.Dom7;
let mainID = that.mainID;
let url = that.GLOBAL.RequestAddress + "/camel/rest/upload"
that.setInlineProgress( 0);
$$('.callback').html("");
let file = document.getElementById('ufile').files[0];
let formdata = new FormData();
formdata.append("file", file);
let xhr = new XMLHttpRequest();
xhr.open("post", url);
xhr.responseType = 'json';
//回调
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
$$('.callback').html(xhr.response.msg);
}
}
//获取上传的进度
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percent = event.loaded / event.total * 100;
that.setInlineProgress( percent);
}
}
xhr.setRequestHeader('AccessToken', sessionStorage.getItem('accessToken'));
xhr.setRequestHeader('JSESSIONID', sessionStorage.getItem('userToken'));
//将formdata上传
xhr.send(formdata);
}
the above is my code.