问题

如何在小程序中实现包括jpg、png、gif等形式的文件上传？

在使用小程序的过程中，在编辑个人资料时，通常会面临上传头像、上传背景图片的情况，而这个开发过程需要怎样实现呢？

方法

（1）引入组件

在需要上传文件的页面的json中引入组件库中的组件。

表1 json代码


{"usingComponents": {"van-uploader": "/dist/uploader/index"},}

（2）wxml中的代码

引入uploader组件实现上传，以及一个button组件实现点击按钮。

表2 wxml代码


<view><van-uploader><van-button icon="photo"  type="primary">上传图片</van-button></van-uploader><text>点击上传文件</text></view>

（3）js配置

如果要实现文件预览，则还需对js进行配置。

表3 js代码

Page({data: {fileList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '图片1' },{url: 'http://iph.href.lu/60x60?text=default',name: '图片2',isImage: true}]}});

（4）最终呈现效果

结语

此种方法的文件上传目前包括的格式有jpg、png、gif几类图片格式，且无法实际应用中实现对图片的更改，但平时使用时上传文件通常存更多形式，还有其他更为全面和复杂的实现方法需要学习。

微信小程序实现文件上传相关推荐

微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
微信小程序多文件上传方法
最近工作项目主要是微信小程序,这篇主要介绍接到的一个需求--多图片上传. 知道需求后马上查了下小程序的api,发现wx.uploadFile并不支持多文件上传,这样就得循环上传,肯定影响速度,后来发现 ...
微信小程序多文件上传（docx，ppt，pdf，zip，jpg···）
这遍文章主要介绍下,在小程序的开发过程中实现多个文件上传的实现方法. chooseMessageFile 使用这一种方式进行多文件的上传时,就是说从客户端会话选择文件,下面是chooseMessage ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序实现录音上传
微信小程序实现录音上传准备开始准备 1.微信开发者工具 2.Api文档开始打开微信开发者工具项目->新建项目选择小程序 appid是在微信公众平台申请的. 链接新建完成后,项目自 ...

微信小程序实现文件上传

问题

方法

结语

微信小程序实现文件上传相关推荐

最新文章

热门文章