el-upload はファイルをカスタムアップロードするときに進行状況バーを表示する必要がありますが、これを使用するとhttp-requestデフォルトのアップロード動作がオーバーライドされ、on-progress有効にならないため、uploading の実装をカスタマイズできます。
レンダリング
機能実現
ボタン
<el-upload class="upload-demo" drag action="" multiple accept=".xls,.xlsx" :show-file-list="false" :http-request="uploadFile" :before-upload="beforeUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
//进度条
<el-progress v-if="showProgress" :percentage="percentage"></el-progress>
データ
data() {
return {
showProgress:false,
percentage:0
}
}
イベント
beforeUpload(file) {
const isLimit = file.size / 1024 / 1024 < 10;
if (!isLimit) {
this.$message.error('文件不能超过10M！');
return
}
},
//上传excel
async uploadFile(params) {
let fileFormat = params.file.name.toLowerCase().split(".").splice(-1)[0];
if (fileFormat !== 'xls' && fileFormat !== 'xlsx') {
this.$message.error('文件类型不正确！');
return
}
const _file = params.file;
this.showProgress = true;
// 前端解析显示
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: 'binary',
cellDates: true
});
// 取第一个key的值
let key = this.getFirstAttr(workbook.Sheets);
//excel中的字段无值时默认为空
const sheet2JSONOpts = {
defval: "" };
// 取到数组
const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[key], sheet2JSONOpts);
// 赋值
if (!this.isEmpty(sheetArray)) {
//判断上传文件是否为空的方法，自己写就行
//进度条处理(重点)
const uploadEvent = (progressEvent) => {
this.percentage = Number(((progressEvent.loaded / progressEvent.total) * 100).toFixed(0));
};
// 后端传file类型
let form = new FormData();
form.append("multipartFile", params.file);
// 导入接口
this.importCheck(form, uploadEvent) //uploadEvent需放在axios请求头headers里面
} else {
this.showProgress = false;
this.$message.error('文件无数据，请重新上传');
return
}
} catch (e) {
this.$message.error('文件类型不正确！');
}
};
fileReader.readAsBinaryString(_file);
},
インポートインターフェース
async importCheck(params, uploadEvent) {
let res = await this.$http.costDetail.costDetailImportCheck(params, uploadEvent); // 此处是自己项目封装的api
if (res.code === "200") {
//逻辑处理省略
this.showProgress = false;
} else {
this.showProgress = false;
}
},
インターフェースメソッド
costDetailImportCheck: function (data,uploadEvent) {
return instance.api('baEquipmentCost/checkExcel', 'post', data,'','',uploadEvent)
},
UploadEvent - カプセル化された axios リクエスト メソッド (キー) のヘッダーに追加するだけです
