zoukankan      html  css  js  c++  java
  • 小程序上传图片和视频提交到服务器

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

      

  • 相关阅读:
    spring cloud 和 阿里微服务spring cloud Alibaba
    为WPF中的ContentControl设置背景色
    java RSA 解密
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
    Hystrix 配置参数全解析
    spring cloud 2020 gateway 报错503
    Spring Boot 配置 Quartz 定时任务
    Mybatis 整合 ehcache缓存
    Springboot 整合阿里数据库连接池 druid
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
  • 原文地址:https://www.cnblogs.com/yuobey/p/10499606.html
Copyright © 2011-2022 走看看