小程序/Vant UI 实现文件的上传

第一次接触小程序上传的时候，自己经过一些实验测试并记录下来以供大家学习。

使用vant UI的官网地址：Vant Weapp - 轻量、可靠的小程序 UI 组件库

如何不使用UI框架的前提下或许有些许出入，但不影响整体的实现细节。

引入官网上的代码：

第一次看上面代码的时候会存在些许疑虑，懂的不是十分的透彻。现在也是懵懵懂懂,主要知道实现的功能也没仔细关注实现的细节。afterRead是上传成功的回调函数，fileList是让图片可以回显到上传文件的组件，可以设置固定的URL来实现回显。

以下的代码是我对上面代码的部分修改来调用后台提供的接口。

Page({data: {fileList: [],},afterRead(event) {let that = thisconst { file } = event.detail;// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式wx.uploadFile({url: 'http://127.0.0.3/upload_file.php', //接口的提供地址filePath: file.url,name: 'file',formData: { user: 'test' },success(res) {// 上传完成需要更新 fileListlet fileList = []let path = "http://127.0.0.3/" + res.datafileList.push({ url: path });console.log(fileList);that.setData({ fileList: fileList });// console.log(res.data);},});},});

这里的res.data就是我提供的文件名称，用拼接字符串的方法来提供url来给fileList赋值。赋值完成后就可以实现图片的回显了，实现的细节如下图所示：

为了大家能够复原实验，将后台的接口代码展示出来供大家学习。

<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
)  //文件大小B && ($_FILES["file"]["size"] < 2000000){if ($_FILES["file"]["error"] > 0) //出错{echo "Return Code: " . $_FILES["file"]["error"] . "<br />";}else //上传文件到临时系统{//echo "Upload: " . $_FILES["file"]["name"] . "<br />";//echo "Type: " . $_FILES["file"]["type"] . "<br />";//echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";//echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";if (file_exists("upload/" . $_FILES["file"]["name"])) //文件存在{echo $_FILES["file"]["name"] . " already exists. ";}else //移动文件到指位置{//获得UUID$uuid = uuid();$uuid = str_replace('-','',$uuid);$extension = explode(".",$_FILES["file"]["name"] );$key = count($extension) - 1;$suffix = $extension[$key];move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $uuid.".".$suffix);echo "upload/" . $uuid.".".$suffix; //Stored in: " . "upload/" . $uuid.$suffix//echo "Stored in: " . "upload/". $uuid.".".$suffix;}}}
else{echo "Invalid file"; //文件类型错误}function  uuid()
{  $chars = md5(uniqid(mt_rand(), true));  $uuid = substr ( $chars, 0, 8 ) . '-'. substr ( $chars, 8, 4 ) . '-' . substr ( $chars, 12, 4 ) . '-'. substr ( $chars, 16, 4 ) . '-'. substr ( $chars, 20, 12 );  return $uuid ;
}
?>

小程序/Vant UI 实现文件的上传相关推荐

微信小程序iconfont字体图标文件无法上传问题
最近在写毕业设计的时候,因为微信小程序本身的字体图标无法满足我的开发需求,但是在引入之后发现开发工具预览没问题但是真机调试就出现了问题, 在查阅资料后找到了解决的办法.我将原本放在static下的字体 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
小程序云开发——图片视频资源上传云端并返回云端路径
在现在的应用中,包括小程序,图片视频等元素是产品必不可少的一部分.如果一个产品仅支持文字,将会很单调.有时候我们需要将图片视频上传到云端或者服务器.我这里将介绍在小程序中怎么上传图片和视频到云端,并返 ...
小程序将页面生成图片，并上传至阿里OSS
前端时间公司的业务里,需要自动将背景图和用户输入的标题生成封面并上传至OSS的需求,感觉以后会用到,因此记录一下. 一.将页面生成图片使用了Painter 2.0库插件(Painter). step ...
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
【开源】【猫咪卡通变 - 小程序】拍摄猫咪或上传猫咪照片，使其转化为卡通猫咪.（且上传图片必须为猫咪）
[来源]https://juejin.cn/post/7028624704491487269 目录一前言二展示情况 [上传检查] [整体流程] 三链接要点(API接口的准备工作) 四核心代 ...
微信小程序之Array操作、图片上传
一.Array操作 1,渲染 Array 对象数组多用于列表渲染,对于列表中的数据,能够进行十分便捷有效的存储. .wxml<view class='clazz-item' bindtap='s ...
微信小程序组件库解析：图片上传与排序组件yImgPro
yunUI是笔者开源的微信小程序功能库.目前其中包含了一些复杂的功能组件.方便使用.未来它将分为组件.样式.js三者合为一体,但分别提供. 本文所用代码皆来源于组件库中的yImgPro组件.详细代码可 ...
微信小程序上传图片到腾讯云服务器,微信小程序（发帖功能），上传本地图片到腾讯云怎么实现？...
1 我刚开始用 lin-ui组件的 imagePicker组件,但是只能实现图片本地上传,本地预览.删除等功能, 无法跟腾讯云cos对象存储交互. cos对象代码 cos.putObject({ Bu ...

小程序/Vant UI 实现文件的上传

小程序/Vant UI 实现文件的上传

小程序/Vant UI 实现文件的上传相关推荐

最新文章

热门文章