zoukankan      html  css  js  c++  java
  • 小程序多图上传

    wxml

         <view class="images" bindtap="upload">
              <image src="../../images/icon_shangchuan.png"></image>
              <text>添加图片</text>
         </view>
    

    wxss

    .images{
          134rpx;
         height: 134rpx;
         border:1px dashed #D8D8D8;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
    }
    .container .images image{
          60rpx;
         height: 60rpx;
    }
    

      

    wx.js

    upload: function (e) {
         var that = this;
         // 上传图片的提示
         if (that.data.uploaderNum >= 10) return wx.showToast({
              title: "最多只能上传" + '10' + "张图",
              duration: 2500,
              icon: "none"
         }), !1;
         //选择图片
         wx.chooseImage({
              count: 10 - that.data.uploaderNum, // 默认10
              sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
              sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
              success: function (res) {
                   // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
                   that.data.uploaderList.concat(res.tempFilePaths);
                   var uploaderList = res.tempFilePaths;
                   that.setData({
                        uploaderList: that.data.uploaderList.concat(res.tempFilePaths),
                   })
                   that.setData({
                        uploaderNum: that.data.uploaderList.length
                   })
                   for (var i = 0; i < uploaderList.length; i++) {
                        wx.uploadFile({
                             url: getApp().globalData.url+'/api/upload/upload',
                             filePath: uploaderList[i],
                             name: 'file',
                             // 需要传的参数
                             formData: {
                                  'user': 'test'
                             },
                             success: function (res) {
                                  that.setData({
                                       tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path) 
                                  })
                             }
                        })        
                   }
              }
         })
    },
    

      

      

  • 相关阅读:
    fishredux 大体流程
    flutter Container组件和Text组件
    vue 页面跳转以及传参
    mySql 查询当天、本周、最近7天、本月、最近30天的语句
    Flutter编译时下载依赖报错的解决方案
    计算属性和方法
    计算属性传参
    原生js发送请求
    MySQL数据库连接
    flask 蓝图
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/13300514.html
Copyright © 2011-2022 走看看