小程序上传图片和视频提交到服务器

在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,
    })
  },

  

原文地址:https://www.cnblogs.com/yuobey/p/10499606.html