vue文件上传进度计算

最新推荐文章于 2025-05-27 20:42:38 发布

原创最新推荐文章于 2025-05-27 20:42:38 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

一：页面：

二：实现上传功能：

<el-form-item label="视频" prop="pic">
       <el-input v-model="form.videoUrl" style="display: none;"/>
       <input type="file" @change="onFileChange" style="display: none;" id="uploadFile"/>
       <el-button type="primary" size="mini" icon="el-icon-upload" @click="goUpload">上传        
       </el-button>
       <el-progress v-if="uploading" :percentage="progress"></el-progress>
</el-form-item>

goUpload() {
      document.getElementById("uploadFile").click(); // 点击文件输入框
},

三：进度计算：

 axios.post(`${url}work/api/AppVersion/upload`, formData, {
        headers: {
          Authorization: getToken(), // 根据实际情况设置token
        },
        onUploadProgress: (progressEvent) => {
          this.progress = Number(((progressEvent.loaded / progressEvent.total) * 
          100).toFixed(1)); // 确保是数字 // 更新上传进度百分比
        },
})

四：功能实现：