微信小程序项目_秋泊优选75

69、意见反馈_提交按钮功能

点击“提交”按钮

获取文本域的内容（1 data中定义变量表示输入框内容、2 文本域绑定输入事件事件触发的时候把输入框的值存入到变量中）
对这些内容合法性验证
验证通过用户选择的图片上传到专门的图片的服务器返回图片外网的链接（1 遍历图片数组、2 挨个上传、3 自己再维护图片数组存放图片上传后的外网的链接）
文本域和外网的图片的路径一起提交到服务器 (前端的模拟不会发送请求到后台...)
清空当前页面
返回上一页

绑定事件
pages\feedback\index.wxml

        <view class="fb_content">
            <textarea value="{{textVal}}" bindinput="handleTextInput" placeholder="请描述一下您的问题"></textarea>
            <view class="fb_tool">
                <button bindtap="handleChooseImg">+</button> 
                <view class="up_img_item" 
                      wx:for="{{chooseImgs}}" 
                      wx:key="*this"
                      bindtap="handleRemoveImg"
                      data-index="{{index}}">
                 <UpImg src="{{item}}"></UpImg>
                </view>
            </view>
        </view>

pages\feedback\index.wxml

        <view class="form_btn_wrap">
            <button bindtap="handleFormSubmit">
               <icon type="success_no_circle" size="23" color="white"></icon>
               提交
            </button>    
        </view>

pages\feedback\index.js

  // 文本域的输入的事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },

  //提交按钮的点击
  handleFormSubmit(){
    // 1 获取文本域的内容
    const {textVal}=this.data;
    // 2 合法性的验证
    if(!textVal.trim()){
      // 不合法
      wx.showToast({
        title:'输入不合法',
        icon:'none',
        // 防止反复点击
        mask: true
      });
      return;
    }
  }

当输入内容不合法时

微信小程序中上次图片的API（wx.uploadFile）

pages\feedback\index.js

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

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id: 0,
        value:"体验问题",
        isActive: true
      },
      {
        id: 1,
        value:"商品、商家投诉",
        isActive: false
      }
    ],
    // 被选中的图片路径数组
    chooseImgs:[],
    textVal:""
  },

  // 外网的图片的路径数组
  UpLoadImgs:[],

  // 标题点击事件从子组件传递过来
  handleTabsItemChange(e){
    console.log(e);
    // 1 获取被点击的标题索引
    const {index}=e.detail;
    // 2 修改源数组
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  },

  // 点击“+”选择图片
  handleChooseImg(){
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片的数量
      count: 9,
      // 图片的格式 原图 压缩
      sizeType: ['original', 'compressed'],
      // 图片的来源 相册 照相机
      sourceType: ['album', 'camera'],
      // 成功之后回调函数
      success: (result) => {
        this.setData({
          // 图片数组进行拼接
        chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
        })
      }
    });  
  },

  // 点击自定义图片组件 删除图片
  handleRemoveImg(e){
    // 2 获取被点击的组件的索引
    const {index}=e.currentTarget.dataset;
    // 3 获取data中的图片数组
    let {chooseImgs}=this.data;
    // 4 删除元素
    chooseImgs.splice(index,1);
    this.setData({
      chooseImgs
    })
  },

  // 文本域的输入的事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },

  //提交按钮的点击
  handleFormSubmit(){
    // 1 获取文本域的内容 图片数组
    const {textVal, chooseImgs}=this.data;
    // 2 合法性的验证
    if(!textVal.trim()){
      // 不合法
      wx.showToast({
        title:'输入不合法',
        icon:'none',
        // 防止反复点击
        mask: true
      });
      return;
    }

    // 3 准备上传图片到专门的图片服务器
    // 上传文件的api不支持多个文件同时上传 遍历数组 挨个上传
    // 显示正在等待的图片
    wx.showLoading({
      title:"正在上传中...",
      mask: true
    });

    // 判断有没有需要上传的图片数组
    if (chooseImgs.length != 0){
      choose1mgs.forEach((v,i)=>{
        wx.uploadFile({
          // 图片要上传到哪里(使用图床)
          url: ' ',
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称后台来获取文件file
          name: "file",
          // 顺带的文本信息
          formData: {},
          success: (result) =>{
            console.log(result);
            let url=JSON.parse (result.data);
            this.UpLoadImgs.push(url);
            // 所有的图片都上传完毕了才触发
            if(i===chooseImgs.length-1){

              // 关闭正在等待的图片
              wx.hideLoading();

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

      })

    }else{
      // 关闭弹窗
      wx.hideLoading();
      console.log("只是提交了文");
      // 返回上个页面
      wx.navigateBack({
        delta:1
      });
    }

  }
})

输入内容
选择图片
点击提交