yuobey

在wxml里写好要提交的图片/视频的字段名(这里通过JS里转换为字符串在通过隐藏的input来提交)

 <!-- 课程封面 -->
      <view class=\'in-demand bor-b\'>
        <view class=\'dema-title\'>
          <text>课程封面:</text>
        </view>
        <view class=\'demand-col  demand-col2\'>
          <view class=\'up-img\' bindtap=\'deteleImg\' data-delcover=\'{{idx}}\' wx:for="{{imgCover}}" wx:key wx:for-index="idx">
            <image name=\'cover_course\' src="{{URL}}/teacherimg/{{item}}"></image>
          </view>
          <view wx:if="{{imgCover.length<1}}" class=\'up-img\' bindtap=\'coverCourse\' src=\'/images/addimg.png\'>
            <image src=\'/images/addimg.png\'></image>
            <input name="cover" style=\'display:none\' value=\'{{coverImgstr}}\'></input>
          </view>
        </view>
      </view>

  JS里 data对象里添加

    imgCourse: [], //课程详情
    imgCover: [], //封面
    tempFilePaths: [],
    imgCourseStr: \'\',
    coverImgstr: \'\',
事件和方法:注释已经写得很清楚。  提交的时候 字段就填拼接后的coverImgstr 参数就行了
// 选择课程详情照片
  courseDetail: function(e) {
    let field = e.currentTarget.dataset.field;
    let that = this
    let fn = function(path) {//传入path参数   参数接收的是uploadImg成功后success(res.data)返回的参数
      console.log(path, \'sssssssssss\')
      that.data.imgCourse.push(path)//把返回的path全部添加到imgCourse数组里
      console.log(that.data.imgCourse, \'sssssssssss\')
      that.setData({
        imgCourse: that.data.imgCourse,
        imgCourseStr: that.data.imgCourse.join(\',\')//把imgCourse数组拼接为字符串方便给后台传输
      })
    }
    this.uploadImg().then(fn)//提交事件处理完 后执行fn函数
  },
  // // 选择封面照片
  coverCourse: function(e) {
    let field = e.currentTarget.dataset.field;
    let that = this
    let fn = function(path) {
      console.log(path, \'sssssssssss\')
      that.data.imgCover.push(path)//
      console.log(that.data.imgCover, \'sssssssssss\')
      that.setData({
        imgCover: that.data.imgCover,
        coverImgstr: that.data.imgCover.join(\',\')
      })
    }
    this.uploadImg().then(fn)
  },
  uploadImg() {
    return new Promise((success, error) => {
      var that = this;
      wx.chooseImage({
        count: 1, // 默认9  
        sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有  
        sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有  
        success: function(res) {
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: CONFIG.API_URL.t_img,
            filePath: res.tempFilePaths[0],
            name: \'img\',
            success(res) {
              success(res.data)
            }
          })
        }
      })

    })
  },
  // 删除照片
  deteleImg: function(e) {
    let delcourse = e.currentTarget.dataset.delcoures;
    let delcover = e.currentTarget.dataset.delcover;
    this.data.imgCover.splice(delcover, 1); //删除封面
    this.data.imgCourse.splice(delcourse, 1); //删除课程详情
    this.setData({
      imgCourse: this.data.imgCourse,
      imgCover: this.data.imgCover,
    })
  },

  

分类:

技术点:

相关文章: