您好,登录后才能下订单哦!
请求超时!
请点击 重新获取二维码今天小编给大家分享一下微信小程序uploadFile接口如何实现文件上传的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
我们默认使用创建新项目进行讲解,在index.vue最上方写入代码
<template> <view > 上传的文件名: <button type="primary" @click="upload()">点击上传</button> </view> </template>
通过前端点击“点击上传”来调用对应的方法
创建后运行如下
①uniapp必须用template标签嵌套
否则
②小程序点击事件用bindtap 而uniapp用@click
③uniapp的方法需要放在methods: {}里面
接下来我们在刚刚创建测试的方法upload中进行修改,首先整个动作原理是:通过点击按钮触发upload方法=》选择文件获取到本地的路径=》上传给 服务器=》服务器返回上传的文件名(上传后随机生成的)
了解到整个流程后我们先将 文件进行选择
uni.chooseImage示例
uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; console.log(tempFilePaths); } });
将代码放在unload中运行测试
可以看到已经生成了临时的文件
接下来我们通过uni.uploadFile
方法完成对文件的上传
uni.uploadFile示例
uni.uploadFile({ url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData: { 'user': 'test' }, success: (uploadFileRes) => { console.log(uploadFileRes.data); } });
在写事件前,我通过在服务器上新建一个php文件作为文件上传的接口
新建tp_imgsrc.php
考虑到大多数初学者这里决定用原生php进行开发
<?php // 上传图片 function uploadimg() { $file = $_FILES['file']; if ($file) { //var_dump($file); // 获取文件后缀名 $ext = pathinfo($file['name'], PATHINFO_EXTENSION); $target = 'upload/' . uniqid() . '.' . $ext; // 转移图片地址 if (!move_uploaded_file($file['tmp_name'], $target)) { $GLOBALS['error_message'] = '上传图片失败'; echo error_message; } die( json_encode( array( 'errCode' => 0, 'error_message'=>'图片上传成功', 'file'=>$target ),480) ); } } uploadimg();
完成后整个目录是这样的(层级关系)
接下来 我们将刚刚的上传接口uni.uploadFile
与文件选择接口uni.chooseImage
合并一下完成整个流程,也就是选择文件完成后,将选择的文件上传
我们在upload方法中写入
let that=this; console.log("我被点击了"); uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; console.log(tempFilePaths); uni.uploadFile({ url: 'https://你的接口地址/tp_imgsrc.php', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData: { }, success: (uploadFileRes) => { console.log(uploadFileRes.data); } }); } });
测试运行看看
返回了文件名和我自己定义的返回码
可以看到服务器上也是存在这个文件的
最重要的步骤我们已经做完了,那上传成功是不是得告诉下上传的用户告诉他们上传成功了?
于是我们需要做一下判断,当errCode==0的时候高速用户上传成功
但是发现了个问题,php返回的是数组,为啥到uniapp返回的是字符串?
指导我看了下官方的文档
返回的是字符类型
解决办法:
let param_json = JSON.stringify(this.$data)//转为字符串 let bookkeeping_data = JSON.parse(bookkeeping_data_string)//转换为JSON
测试后完美解决
改动到的代码
let json_data = JSON.parse(uploadFileRes.data) console.log(json_data['errCode']);
接下来就可以将信息告诉用户是否上传成功了
uni.showToast示例
uni.showToast({ title: '标题', icon:'none' duration: 2000 });
相应的代码:
let json_data = JSON.parse(uploadFileRes.data) console.log(json_data['errCode']); if (json_data['errCode']==0) { uni.showToast({ title: json_data['error_message'], icon:'none', duration: 2000 }); } else{ }
测试截图
完整的index.vue
<template> <view > 上传的文件名: <button type="primary" @click="upload">点击上传</button> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { let that=this; uni.request({ url: 'https://api.uomg.com/api/qq.info', //仅为示例,并非真实接口地址。 data: { qq: '504113939' }, header: { 'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息 }, success: (res) => { console.log(res.data); } }); }, methods: { upload(){ let that=this; console.log("我被点击了"); uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; console.log(tempFilePaths); uni.uploadFile({ url: 'https:/你的接口/tp_imgsrc.php', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData: { }, success: (uploadFileRes) => { let json_data = JSON.parse(uploadFileRes.data) console.log(json_data['errCode']); if (json_data['errCode']==0) { uni.showToast({ title: json_data['error_message'], icon:'none', duration: 2000 }); } else{ } } }); } }); }, } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>
以上就是“微信小程序uploadFile接口如何实现文件上传”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
深圳SEO优化公司黔南seo网站推广公司迪庆网站推广系统价格酒泉seo哪家好黄冈网页设计价格黄石网站建设设计甘南推广网站推荐武汉网站推广报价襄樊模板制作报价柳州设计公司网站哪家好海北网站定制报价辽阳外贸网站建设报价珠海企业网站制作多少钱龙岩网站搭建公司酒泉营销网站多少钱固原模板制作公司云浮百度竞价包年推广多少钱滨州阿里店铺托管推荐珠海企业网站改版公司随州设计公司网站价格邵阳seo优化推荐铜川外贸网站制作合肥百搜标王报价鄂州网站seo优化十堰外贸网站制作多少钱黄山网页设计推荐晋城百姓网标王朝阳阿里店铺运营公司海东营销网站阳江网站优化多少钱南京关键词按天收费多少钱歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运