本文主要是介绍小程序上传文件 wx.uploadFile，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
微信小程序实现文件图片上传功能
准备工作：
在微信公众平台配置uploadFile域名白名单，开发管理->开发设置->服务器域名->uploadFile合法域名
如下图
使用 wx.chooseImage + wx.uploadFile
view
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{imgList}}" wx:key="imagelist" bindtap="ViewImage" data-url="{{imgList[index]}}">
<image src='{{baseUrl+imgList[index]}}' mode='aspectFill'></image>
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="cuIcon-close"></text>
</view>
</view>
<view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="cuIcon-cameraadd"></text>
</view>
</view>
</view>
js处理部分
ChooseImage() {
let that = this;
let token = wx.getStorageSync('token');
let openId = wx.getStorageSync('openId');
wx.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
let filePath = res.tempFilePaths[0];
wx.uploadFile({
url: config.api_blink_url + `/app/app/upload`,
filePath: filePath,
name: 'file',
header: {
'appId': config.appId,
'token': token || '',
'openId': openId || '',
'uuid': config.uuid,
'accept': 'application/json',
"Content-Type": "multipart/form-data"//记得设置
},
// formData: {
// 'file': filePath
// },
// body: {
// 'file': filePath
// },
success: function(result) {
if (result.statusCode === 500 ) {
wx.showToast({
title: `图片上传失败`,
icon: 'error',
duration: 1500
})
return;
}
let resData = JSON.parse(result.data);
if (resData && resData.code === 0) {
let path = resData.data.img;
if (that.data.imgList.length != 0) {
that.setData({
imgList: that.data.imgList.concat(path)
})
} else {
let list = [path]
that.setData({
imgList: list
})
}
}
},
complete: function(result) {},
fail: function(result) {
wx.showToast({
title: `图片上传失败`,
icon: 'error',
duration: 1500
})
}
});
}
});
},
实现效果如下：
这篇关于小程序上传文件 wx.uploadFile的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
