<h4>上传文件:</h4>
<p class="input-zone">
<span v-if="filename">{ {filename}}</span>
<span v-else>+请选择文件上传+</span>
<input type="file" name="file" value="" placeholder="请选择文件" @change="upload" multiple="multiple" />
</p>
<p>上传进度:</p>
<div class="progress-wrapper">
<div class="progress-progress" :style="uploadStyle"></div>
<div class="progress-rate">{ {(uploadRate*100).toFixed(2)}}%</div>
</div>
vue项目中使用axios上传文件显示进度
最新推荐文章于 2024-07-24 10:46:11 发布
这篇博客详细介绍了在Vue项目中如何使用axios库上传文件并实时显示上传进度。通过监听`onUploadProgress`事件,计算并更新上传进度条的样式。在上传文件时,先将文件添加到formData中,然后设置headers为'multipart/form-data',并发送POST请求到服务器。当上传进度可计算时,根据加载和总大小的比例更新进度,并在响应返回后将进度设置为100%,确保上传成功。
摘要由CSDN通过智能技术生成