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

算法与编程之美

发布于 2020-07-02 15:06:11

2K0

发布于 2020-07-02 15:06:11

文章被收录于专栏：算法与编程之美算法与编程之美

问题描述

如何在小程序中实现包括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）最终呈现效果