最近做了个小程序,涉及到了图片上传的功能,今天给大家分享下如何实现小程序图片上传。
wxml部分:
<!-- 图片上传 --> <view class="files"> <t-upload mediaType="{{['video','image']}}" max="{{1}}" files="{{fileList}}" bind:add="handleAdd" bind:remove="handleRemove"> </t-upload> </view>
功能实现部分:
// 图片上传 handleAdd(e) { let that = this; console.log(e); const { fileList } = this.data; const { files } = e.detail; // 方法1:选择完所有图片之后,统一上传,因此选择完就直接展示 this.setData({ fileList: [...fileList, ...files], // 此时设置了 fileList 之后才会展示选择的图片 }); //上传到后台 wx.uploadFile({ url: '请求网址', filePath: e.detail.files[0].url, //静态图片路径 name: 'file',//请求接口需求的参数格式 formData: { 'user': 'test' }, success: function (res) { const data = res.data console.log(JSON.parse(data)); } }) },