微信小程序|实现文件上传

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

如何在小程序中实现包括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几类图片格式，且无法实际应用中实现对图片的更改，但平时使用时上传文件通常存更多形式，还有其他更为全面和复杂的实现方法需要学习。

END

实习编辑   |   王楠岚

责       编   |   吴怡辰

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！