微信小程序文件上传，图片上传-优快云博客

本文链接：https://blog.youkuaiyun.com/servicesYY/article/details/83276238

本文详细介绍了在微信小程序中实现证件照片上传的功能，包括XML布局设计与JS逻辑处理，展示了如何使用wx.chooseImage和wx.uploadFile进行图片选择与上传，并处理上传后的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：xml

<view style="margin-top: 20px" class="weui-flex">

  <view style="width: 35%;font-size: 0.7em">证件照片</view>

  <!-- <input class="_input weui-flex__item" value="{{appkey}}" /> -->

  <view class="weui-flex__item">

  <image src='{{developer_file}}' style='width:100px;height:100px'></image>

  </view>

  <view style="display:{{isSave == 'show' ? 'none':'block'}}">

  <button size='mini' bindtap="btn_img">选择照片</button>

  </view>

</view>

2：js

btn_img: function (e) { //图片上传

var that = this;

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

var tempFilePaths = res.tempFilePaths;

wx.uploadFile({

url: '', //此处换上你的接口地址

filePath: tempFilePaths[0],

name: 'file',

header: {



},

formData: {

'user': 'test',

'file': tempFilePaths[0]

},

success: function (res) {

if (res.statusCode == '200') {

console.log("图片上传成功");

var jsonData = JSON.parse(res.data);

that.setData({

imageFile: tempFilePaths,

developer_file: jsonData.data

})

} else {

showSuccess('上传失败');

}

},

fail: function (res) {

console.log('fail');

},

})

}

})

}