|
var app = new Vue({
el: "#app",
data: {
uploadRate: 0,
filename: '',
uploadStyle: {
width: '0%'
}
},
methods: {
upload: function (e) {
var vm = this;
var formData = new FormData();
formData.append("name", "Alax");
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files[i]; //取第1个文件
formData.append("file", file);
vm.filename = file.name;
console.log(file);
}
var config = {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: function (e) {
console.log("进度：");
console.log(e);
//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
//如果lengthComputable为false，就获取不到e.total和e.loaded
if (e.lengthComputable) {
var rate = vm.uploadRate = e.loaded / e.total; //已上传的比例
if (rate < 1) {
//这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道
//因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败
//等响应回来时，再将进度设为100%
vm.uploadRate = rate;
vm.uploadStyle.width = (rate *100).toFixed(2)+ '%';
}
}
}
};
axios.post("/ajaxPage/VueUpload.aspx?method=upload", formData, config)
.then(function (data) {
console.log(data);
var json = data.data; //后台实际返回的结果
if (json.result) {
vm.uploadRate = 1;
vm.uploadStyle.width = '100.00%';
} else {
alert(json.msg);
}
})
.catch(function (err) {
console.log(err);
});
}
}
})
|
