<div class="ImportScores-content-Bottom-uploading">
<div class="ImportScores-uploading-icon"></div>
<span class="uploading-text" ref="uploadArea" @click="triggerFileInput">上传</span>
<input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
</div>
/***
* 上传文件
* ***/
handleFileChange() {
// 处理文件选择事件
const fileInput = this.$refs.fileInput;
// console.log(fileInput.files[0])
this.selectedFile = fileInput.files[0];
// 检查是否选择了文件
// const reader = new FileReader();
// // // 读取文件完成时的回调函数
// reader.onload = (event) => {
// // event.target.result 包含文件的内容
// const fileContent = event.target.result;
// // 这里可以根据需要对文件内容进行处理
// console.log("File Content:", fileContent);
// // 将文件内容保存到组件的数据中或执行其他操作
// this.selectedFile = fileContent.split(',')[1];
// };
// console.log(fileInput.files[0],'/fileInput.files[0]')
// // 读取文件
// reader.readAsArrayBuffer(fileInput.files[0]);
// reader.readAsDataURL(this.selectedFile);
// reader.readAsText(this.selectedFile);
},
/**
* 确定上传文件
* ***/
updownEvent() {
// 创建Blob对象
if (!this.selectedFile) {
console.error("No file selected for upload");
return;
}
// // 创建File对象
// const file = new File(["First Line Text"], this.selectedFile);
const formData = new FormData();
formData.append("file", this.selectedFile);
formData.append("typeFid", this.ToChannelData.testType);
formData.append("schod", this.ToChannelData.schoolId);
formData.append("yrId", this.ToChannelData.yearId);
formData.append("gadeId", this.ToChannelData.gradeId);
formData.append("sbjectId", this.ToChannelData.subjectId);
formData.append("tstNe", this.value);
importExaminationInfo(formData).then(res => {
console.log(res, '上传成功')
}).catch(err => {
console.log(err, '上传失败')
})
},
切记几口那不需要...结构直接传递formData方可
当获取进度时
/***
* 导入考试信息
* ***/
export const importExaminationInfo = async (
params,
onUploadProgressCallback
) => {
const res = await request.post(
'',
params,
{
onUploadProgress: function(progressEvent) {
if (progressEvent.lengthComputable) {
const uploadPercentage = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`上传进度:${uploadPercentage}%`);
// Call the callback with the uploadPercentage value
if (onUploadProgressCallback) {
onUploadProgressCallback(uploadPercentage);
}
} else {
console.log('无法计算上传进度,lengthComputable is false.');
}
},
},
{}
);
return res;
};
importExaminationInfo(formData, this.handleUploadProgress).then(res => {
console.log(res, '上传成功')
}).catch(err => {
console.log(err, '上传失败')
})
、、、、、、、
方法
/**
* 获取上传进度
* ***/
handleUploadProgress(uploadPercentage) {
console.log(`上传进度:${uploadPercentage}%`);
},