微信小程序：图片上传--意见反馈

微信小程序–意见反馈页面

包含功能点：

• 意见反馈
• 上传图片

结构：feedback.wxml

<tabs tabList="{{tabList}}" binditemChange="handleItemChange">
    <view class="fb_main">
        <view class="fb_title">问题的种类</view>
        <view class="fb_tips">
            <text>功能建议</text>
            <text>购买遇到问题</text>
            <text>性能问题</text>
            <text>其他</text>
        </view>
        <view class="fb_content">
            <textarea value="{{textValue}}" bindinput="handleTextInput" placeholder="请描述一下您的问题" name="" id="" cols="30" rows="10"></textarea>
            <view class="fb_tool">
                <button bindtap="handleChooseImage">+</button>
                <view class="up_img_item"
                wx:for="{{chooseImage}}"
                wx:key="*this"
                bindtap="handleRemoveImg"
                data-index="{{index}}">
                    <upImage src="{{item}}"></upImage>
                </view>
            </view>
        </view>
        <view class="form_btn_wrap">
            <button type="warn" bindtap="handleFormSubmit">
                <icon class="" type="success_no_circle" size="16" color="#fff">
                    
                </icon>
                  提交
            </button>
        </view>
    </view>
</tabs>

样式：feedback.less

page {
  background-color: #eee;
}

.fb_main {
  padding: 20rpx;
  color: #666;

  .fb_title {}

  .fb_tips {
    display: flex;
    flex-wrap: wrap;

    text {
      width: 30%;
      padding: 10rpx;
      text-align: center;
      background-color: #fff;
      margin: 20rpx 10rpx;
    }
  }

  .fb_content {
    margin-top: 20rpx;
    background-color: #fff;

    textarea {
      padding: 10rpx;
    }

    .fb_tool {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 30rpx;

      button {
        width: 70rpx;
        height: 70rpx;
        font-size: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        margin-left: 20rpx;
        color: #ccc;
      }

      .up_img_item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
      }
    }
  }

  .form_btn_wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;

    button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180rpx;
      height: 60rpx;
      margin: 0;
      font-size: 30rpx;
    }

  }
}

逻辑：feedback.js文件

// pages/feedback/feedback.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabList: [
      {
        id: 0,
        name: "体验问题",
        isActive: true,
      },
      {
        id: 1,
        name: "商品、商家投诉",
        isActive: false,
      }
    ],
    // 被选中的图片数组
    chooseImage: [],
    // 文本域的内容
    textValue: "",
    // 外网的图片的路径数组
    UpLoadImgs: []
  },
  handleItemChange(e) {
    const { index } = e.detail;
    /**
      * 严谨做法：重新拷贝一份数组，再对这个数组的备份进行处理
      * let tabList = JSON.parse(JSON.stringify(this.data.tabList));
      * 一般做法：let {tabList} = this.data;
      */
    let tabList = JSON.parse(JSON.stringify(this.data.tabList));
    tabList.forEach((v, i) => {
      i === index ? v.isActive = true : v.isActive = false;
    })
    this.setData({
      tabList
    })
  },
  // 点击加号选择图片
  handleChooseImage() {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        this.setData({
          chooseImage: [...this.data.chooseImage, ...result.tempFilePaths]
        })
      },
    });

  },
  // 删除选中的图片
  handleRemoveImg(e) {
    // 获取被点击的组件的索引
    const { index } = e.currentTarget.dataset;
    // 获取data中的图片数组
    let { chooseImage } = this.data;
    // 删除元素
    chooseImage.splice(index, 1);
    this.setData({
      chooseImage
    })
  },
  // 文本域输入事件
  handleTextInput(e) {
    this.setData({
      textValue: e.detail.value
    })
  },
  // 点击提交按钮
  handleFormSubmit() {
    // 1.获取文本域的内容
    const { textValue, chooseImage } = this.data;
    // 2.合法性的验证
    if (!textValue.trim()) {
      // 不合法
      wx.showToast({
        title: '输入的内容不合法',
        icon: 'none',
        mask: true,
      });
      return
    }
    // 3.准备上传图片  到专门的服务器
    // 上传文件的api  不支持  多个文件同时上传 =>解决方法：遍历数组，挨个上传

    // 显示正在等待的图片，上传中...
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });

    // 判断有没有需要上传的图片数组
    if (chooseImage.length != 0) {
      chooseImage.forEach((v, i) => {
        wx.uploadFile({
          // 图片要上传到哪里
          url: 'http://images.ac.cn/api/upload',
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称  后台来获取文件  file
          name: "file",
          // 顺带的文本信息
          formData: {
            image: "file",
            apiType: "ali",
            privateStorage: "cos",
            token: wx.getStorageSync("token")
          },
          success: (result) => {
            console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);
            if (i === chooseImage.length - 1) {
              // 关闭上传提示
              wx.hideLoading();

              console.log("把文本的内容和外网的图片数组  提交到后台中")
              // 提交都成功了
              // 重置页面
              this.setData({
                textValue: "",
                chooseImage: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
          },
        });
      })
    } else {
      wx.hideLoading();
      wx.navigateBack({
        delta: 1
      });
      console.log("只是提交了文本")
    }
  }
})

页面配置文件：feedback.json文件

{
  "usingComponents": {
    "tabs": "../../component/tabs/tabs",
    "upImage": "../../component/upImage/upImage"
  },
  "navigationBarTitleText": "意见反馈"
}