zoukankan      html  css  js  c++  java
  • 小程序方法-上传多上图片

    //数据
      data: {
        imgUrl:[],
        imgname:[],
      },
     //上传方法 
     //<view class="pic_add" bindtap='imgupload'><image src="/images/add.png" mode="widthFix"></image></view>
     imgupload:function () {
        var that = this;
        var count = 6 - parseInt((that.data.imgUrl).length);
        if( count == false )
        {
          wx.showToast({
            title: '最多上传6张',
            duration: 1500
          })
          return false;
        }
        wx.chooseImage({
          count: 1,
          sizeType: ['compressed'],      
          success: function (res) {
            var tempFilePaths = res.tempFilePaths;
            var i = 0; //第几个
            var length = res.tempFilePaths.length; //总共个数
            var successUp = 0; //成功个数
            var failUp = 0; //失败个数
            that.uploadImg(tempFilePaths, successUp, failUp, i, length);
          }
        })
      },
      uploadImg: function (tempFilePaths, successUp, failUp, i, length) {
        var that = this;
        var token = wx.getStorageSync('token');
         wx.uploadFile({
          url: _data.get_api_imgupload, //仅为示例,非真实的接口地址
          filePath: tempFilePaths[i],
          name: 'file',
          header: {
            'content-type': 'multipart/form-data',
            'Authorization': token
          },
          success: function (res) {
            //console.log(res);
           var srcArr = that.data.imgUrl;
               srcArr.push(data.data.src);
           var imgname = that.data.imgname;
               imgname.push(data.data.name);
               that.setData({
                imgUrl: srcArr,
                imgname: imgname
               });
          }, complete: () => {
            i++;
            if (i == length) {
              return;
            } else {  //递归调用uploadDIY函数
              if (!that.data.isuploaderror) {
                this.uploadImg(tempFilePaths, successUp, failUp, i, length);
              }
            }
          }
        })
      }, 
      //删除
      //<view class="pic_dle" data-id="{{key}}" data-name="{{imgname[key]}}" bindtap='remImg'><image src="/images/dle.png" mode="widthFix"></image></view>
      remImg:function (e) {
        var that = this;
        var dataset = e.currentTarget.dataset;
        var Index = dataset.id;
        var name = dataset.name;
        //通过`index`识别要删除第几条数据,第二个数据为要删除的项目数量,通常为1
        that.data.imgUrl.splice(Index, 1);
        that.data.imgname.splice(Index, 1);
        //渲染数据
        that.setData({
          imgUrl: that.data.imgUrl,
          imgname: that.data.imgname
        });
        var url = _data.get_api_imgdel;
        var data = {'name': name};
        _httpHelper.httpPost(url, data, function (res) {});
      },
    与尘埃中开出花朵。
  • 相关阅读:
    运维安全、架构、日志管理等要安装的东西,一直在更新,欢迎大家评论
    http协议的发展史
    uni-app实现通话录音实时上传、后端php-安卓手机
    uni-app H5 plus.io 获取手机指定路径目录下所有文件
    Laravel框架部署过程中的步骤:安装 composer、切换镜像、安装laravel、创建项目
    vue 强制修改el-input样式
    ide激活码,可激活goland、phpstorm、webstorm、Pycharm
    PHP转Go函数库
    Uni-app父组件如何调用子组件的方法 | 父页面如何调用子页面的方法
    Uni-app子组件如何调用父组件的方法 | 子页面如何调用父页面的方法
  • 原文地址:https://www.cnblogs.com/congfeicong/p/10185009.html
Copyright © 2011-2022 走看看