uniapp中使用原生ajax上传文件并携带其他数据,实时展示上传进度

embedded/2024/11/14 11:14:03/

在uniapp开发过程中,我们经常遇到需要上传文件并携带其他数据的场景。本文将详细介绍如何在uniapp中使用原生ajax实现文件上传,并实时展示上传进度,帮助大家轻松应对此类需求。

一、准备工作

在开始之前,请确保你的uniapp项目已经创建好,并且已经安装了必要的开发环境。

二、创建上传表单

首先,我们需要在页面上创建一个上传表单,用于选择文件和输入其他数据。

<template><view><form><input type="file" @change="handleFileChange" /><input type="text" v-model="otherData" placeholder="请输入其他数据" /><button @click="uploadFile">上传文件</button></form><progress :value="uploadProgress" max="100"></progress></view>
</template>

在上述代码中,我们创建了一个文件输入框和一个文本输入框,以及一个上传按钮和进度条。

三、实现上传逻辑

接下来,我们将实现上传文件并携带其他数据的逻辑。

1、创建XMLHttpRequest对象

javascript">data() {return {otherData: '',uploadProgress: 0};
},
methods: {handleFileChange(event) {this.file = event.target.files[0];},uploadFile() {var xhr = new XMLHttpRequest();var formData = new FormData();// 添加文件formData.append('file', this.file);// 添加其他数据formData.append('otherData', this.otherData);xhr.open('POST', 'your-upload-url', true);// 监听上传进度xhr.upload.onprogress = (event) => {if (event.lengthComputable) {var percentComplete = (event.loaded / event.total) * 100;this.uploadProgress = percentComplete;}};// 请求完成xhr.onload = () => {if (xhr.status === 200) {// 上传成功console.log('上传成功');} else {// 上传失败console.log('上传失败');}};// 发送请求xhr.send(formData);}
}

在上述代码中,我们首先创建了一个FormData对象,用于封装文件和其他数据。然后,我们创建了一个XMLHttpRequest对象,并设置了请求类型为POST。在upload.onprogress事件中,我们计算并更新了上传进度。最后,在onload事件中,我们处理了上传成功和失败的情况。

四、总结

通过以上步骤,我们成功地在uniapp中实现了使用原生ajax上传文件并携带其他数据,同时实时展示上传进度。这种方法不仅适用于uniapp,还可以在其他基于Vue.js的前端项目中使用。掌握这一技能,将有助于我们在开发过程中更好地满足用户需求。在实际项目中,请根据实际情况调整上传接口和数据处理逻辑。

 

 


http://www.ppmy.cn/embedded/137225.html

相关文章

python爬虫豆瓣top250

注意 1&#xff0c;BeautifulSoup lxml解析器安装 2&#xff0c;代码缩进格式 f.close() import csvimport requests from bs4 import BeautifulSoup# 请求头部 headers {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) …

【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】试卷(4)

前言 大家好吖&#xff0c;欢迎来到 YY 滴计算机网络 系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 本博客主要内容&#xff0c;收纳了一部门基本的计算机网络题目&#xff0c;供yy应对期中考试复习。大家可以参考 本章是去答案版本。带答案的版本在下…

Python 正则表达式基础教程:简单匹配

Python 正则表达式基础教程&#xff1a;简单匹配 正则表达式&#xff08;Regular Expression&#xff09;是一种用于匹配字符串模式的强大工具。在 Python 中&#xff0c;正则表达式广泛用于数据处理、文本分析等任务&#xff0c;能够帮助我们快速找到或替换特定的字符或字符串…

vue-h5:在h5中实现相机拍照加上身份证人相框和国徽框

1.基础功能 参考&#xff1a; https://blog.csdn.net/weixin_45148022/article/details/135696629 https://juejin.cn/post/7327353533618978842?searchId20241101133433B2BB37A081FD6A02DA60 https://www.freesion.com/article/67641324321/ https://github.com/AlexKrat…

面试:TCP、UDP如何解决丢包问题

文章目录 一、TCP丢包原因、解决办法1.1 TCP为什么会丢包1.2 TCP传输协议如何解决丢包问题1.3 其他丢包情况&#xff08;拓展&#xff09;1.4 补充1.4.1 TCP端口号1.4.2 多个TCP请求的逻辑1.4.3 处理大量TCP连接请求的方法1.4.4 总结 二、UDP丢包2.1 UDP协议2.1.1 UDP简介2.1.2…

flutter 语法糖库 flutter_magic 发布 1.0.1

众所周知&#xff0c;flutter 是一款由谷歌开发的跨平台工具&#xff0c;一直在开发者心中久负盛名。 但是语法死亡嵌套是个诟病。 最近有 flutter 开发者 panjing&#xff0c;发布了 flutter 语法精简库&#xff0c;flutter_magic&#xff0c;可以让语法变成类似 swiftui 一…

Spring Boot编程训练系统:性能优化实践

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足&#xff0c;创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…

反射型XSS--理论

什么是XSS&#xff1f; XSS&#xff08;Cross Site Script&#xff09;&#xff0c;即跨站脚本攻击。 攻击的基本过程&#xff1a; 攻击者在Web页面里插入恶意的js代码&#xff1b;用户浏览该页面时&#xff0c;嵌入界面的恶意代码被执行&#xff1b;攻击者达到攻击目的。 …