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

      

  • 相关阅读:
    Ext JS 6学习文档-第5章-表格组件(grid)
    Ext JS 6学习文档-第4章-数据包
    Ext JS 6学习文档-第3章-基础组件
    Ext JS 6学习文档–第2章–核心概念
    Ext JS 6学习文档–第1章–ExtJS入门指南
    Console命令详解,让调试js代码变得更简单
    使用Node.js+Socket.IO搭建WebSocket实时应用
    node.js应用--转载
    Node.js 究竟是什么?
    Hello, Unity!
  • 原文地址:https://www.cnblogs.com/yuobey/p/10499606.html
Copyright © 2011-2022 走看看