微信小程序|实现文件上传
问题描述
如何在小程序中实现包括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 团队
举报
腾讯云开发者
