前言:
最近有不少初学者在后台留言咨询Axios上传附件的问题,鉴于咨询的同学比较多,我这就简单写了个Axios上传附件的样例代码给大家参考,希望对于初学者有所帮助。
Axios上传附件代码:
<template> <div> <div> 选择文件: <input id="myFile" type="file" @change="fileChange" /> </div> <div> 当前上传进度: <span>{{ currentPercentage + '%' }}</span> </div> <div> <input type="button" value="上传文件/断点续传" @click="uploadFile" /> <input type="button" value="取消上传" @click="cancelUploadFile" /> </div> </div> </template> <script lang="ts"> import { Vue, Component } from 'vue-property-decorator'; import axios from 'axios'; @Component export default class Property extends Vue { // 堆代码 duidaima.com // 当前选中的文件 file: any = null; // 当前选中文件的大小 fileSize: number = 0; // 初始上传偏移量 startOffset: number = 0; // 当前已上传偏移量 currentOffset: number = 0; // 当前已上传百分比进度 currentPercentage: number = 0; // 取消请求的对象 source: any = null; // 选择文件,仅一个 fileChange(e: any) { // 选中的文件 this.file = e.target.files[0]; // 选中的文件的大小 this.fileSize = this.file.size; } // 开始上传 uploadFile() { // 每次都需要重新生成source, 因为根据source取消上传后, 再用同一个source会造成不会再发起请求 this.source = axios.CancelToken.source(); // 将文件加入表单中 let formData = new FormData(); formData.append('myFile', this.file.slice(this.startOffset, this.file.total), this.file.name); // 提交表单数据 axios.post('http://127.0.0.1:8080/fileUpDown/fileUpload.action', formData, { // 取消操作 cancelToken: this.source.token, // 上传进度(与下载进度要互斥) onUploadProgress: (event) => { this.currentOffset = this.startOffset + event.loaded; let progress = Math.floor(this.currentOffset / this.fileSize * 100); this.currentPercentage = progress <= 100 ? progress : 100; }, }) // 上传/下载完成 .then((result) => { // 打印返回结果 console.log(result); // 重置开始偏移量 this.startOffset = 0; // 重置选择的文件 this.file = null; (document.getElementById('myFile') as HTMLFormElement).value = null; // 重置选择文件大小 this.fileSize = 0; }) // 上传/下载失败 .catch((err) => { // 记录已上传进度 this.startOffset = this.currentOffset; }) // 处理后事 .then(function() { console.log('处理后事'); }); } // 取消上传 cancelUploadFile() { // 取消请求 this.source.cancel("取消上传/下载"); // 记录当前已上传进度 this.startOffset = this.currentOffset; } } </script> <style lang="less" scoped> </style>