微信小程序实现文件上传

Posted 算法与编程之美

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序实现文件上传相关的知识,希望对你有一定的参考价值。

问题

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

以上是关于微信小程序实现文件上传的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-上传文件 (chooseMessageFile)

微信小程序实现图片是上传预览功能

微信小程序语音同步智能识别的实现案例

微信小程序语音同步智能识别的实现案例

uni-app 微信小程序 上传图片 文件 uni.uploadFile() 、 uni.chooseImage()

微信小程序上传图片+图片预览