微信小程序-图片上传

wxml文件中

<!-- 添加图片按钮 -->
        <button bindtap="handleChooseImg">+</button>

放一个按钮，用户点击时，就调用方法来使用 wx.chooseImage API来选取图片（当然可以不用按钮，或者设置样式弄的好看些）比如改成：这种样式

js文件中

既然有选择图片，那就要有显示图片的地方，所以，要将 wx.chooseImage方法返回的本地虚拟路径渲染到页面上做预览。

<!-- 添加图片按钮 -->
        <button bindtap="handleChooseImg">+</button>   
<!-- 选择的图片预览区域 -->
<!-- bindtap="handleRemoveImg"  ==》 点击该图时删除它 -->
        <view class="up_img_item" wx:for="{
         
  {chooseImgs}}" wx:key="*this" bindtap="handleRemoveImg"
          data-index="{
         
  {index}}">
          <image src="{
         
  {item.src}}"></image>
          <!-- 右上角的叉叉图标，通过绝对定位实现 -->
          <icon type="clear" size="23" color="red"></icon>
          <!-- 上传图片组件 -->
          <UpImg src="{
         
  {item}}"></UpImg>
        </view>

      <button bindtap="handleFormSubmit" type="warn">
        提交表单（包括图片、文本）
      </button>

js部分完成代码：

其中通过wx.chooseImage选择图片后，再通过forEach循环遍历返回的本地图片地址数组，依次触发wx.uploadFile，将图片上传给后端，返回外网地址url，最后，再将外网图片地址数组、文本数据，一起提交给后台。