微信小程序上传多图到七牛

news/2024/7/20 4:34:45 标签: 小程序, 微信

记一次微信小程序上传多图到七牛的步骤和全部代码:

要做成的效果是这样的:

 以图文的形式反馈,图片不超过九张。

微信小程序上传图片到七牛步骤:

1.第一次请求获得七牛token :?s=App.Upload.QiniuToken

请求获得token和host.

2.用wx.chooseImage点击上传图片

3.wx.uploadFile 上传到七牛云:   http://upload-z2.qiniup.com

先贴wxml代码:

<view class="fklr">
  <textarea class="inp" placeholder="输入反馈的内容" placeholder-class="inpt" value="{{feedbackInfo}}" bindblur="contentInput" maxlength="500"></textarea>
</view>
< 分割线
<view class="fgx"></view>
<!-- 分割线 -->
<view class="tjtp">添加图片</view>

<view class="dt">
  <view wx:if="{{tp}}" wx:for="{{tp}}" wx:key="index">
    <image class="more" bindlongpress="shanchu" data-id="{{index}}" src="{{item}}"></image>
  </view>
  <view wx:if="{{tp.length==0}}">
    <image class="more" src="../../images/moren.png"></image>
  </view>

  <image class="sc" src="../../images/shangc.png" bindtap="sc"></image>
</view>
<view class="fgx1"></view>

<view class="qr" bindtap="confirmFeedback">确认反馈</view>

 js代码:不是按照我上面说的顺序写的,有些函数封装和调用。

//点击加号上传触发的事件:
 sc: function (e) {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res.tempFilePaths)
        let tempFilePaths = app.fileName(res.tempFilePaths[0].substring(res.tempFilePaths[
          0].lastIndexOf('.') + 1));
        let tempFilePaths2 = res.tempFilePaths[0];
        app.request({
          url: "?s=App.Upload.QiniuToken",
          method: "post"
        }).then(res => {
          console.log(res);
          let uptoken = res.data.data.token;
          let host = res.data.data.host;
          console.log(uptoken);
          that.uploadQiniu(tempFilePaths, tempFilePaths2, uptoken);
        })
        let old_data = that.data.tp
        let new_data = res.tempFilePaths
        if (that.data.tp.length + res.tempFilePaths.length <= 9) {
          that.setData({
            tp: old_data.concat(new_data)
          })
          console.log(that.data.tp)
        } else {
          wx.showToast({
            title: '图片不超过9张',
            icon:"none",
            duration: 1000,
          })
        }
      }
    })
  },
//上传图片到七牛的函数
   uploadQiniu(tempFilePaths, tempFilePaths2, uptoken) {
    console.log(tempFilePaths, tempFilePaths2);
    var that = this;
    let fankuiImg=that.data.fankuiImg;
    wx.uploadFile({
      url: 'http://upload-z2.qiniup.com',
      name: 'file',
      filePath: tempFilePaths2,
      formData: {
        key: tempFilePaths,
        token: uptoken,
      },
      success: function (res) {
        let data = JSON.parse(res.data)
        console.log(data);
        let picKey = data.key
        console.log(that.data.host);
        let qunImg = that.data.host + picKey;
        fankuiImg = fankuiImg.concat(qunImg);
        console.log(fankuiImg)
        that.setData({
          qunImg:qunImg,
          fankuiImg:fankuiImg
        })
      },
      fail: function (res) {
        console.log(res)
      }
    });
  },
//长按删除
shanchu: function (e) {
    console.log(e)
    var that = this
    var tp = that.data.tp
    var index = e.currentTarget.dataset.id
    wx.showModal({
      title: '提示',
      content: '确定要删除此图片吗?',
      success: function (res) {
        if (res.confirm) {
          console.log('点击确定了');
          tp.splice(index, 1);
        } else if (res.cancel) {
          console.log('点击取消了');
          return false;
        }
        that.setData({
          tp
        });
      }
    })
  },
//反馈文字内容
 contentInput(e){
    let value = e.detail.value;
    console.log(value);
    this.setData({
      feedbackInfo:e.detail.value
    })
  },
//确认反馈
confirmFeedback(e){
    if(this.data.feedbackInfo==""||this.data.feedbackInfo==null){
      wx.showToast({
        title: '请输入反馈内容',
        icon:"none"
      })
    }else{
      app.request({
        url:"?s=App.User.Feedback",
        method:"post",
        data:{
          text:this.data.feedbackInfo,
          imgs:this.data.fankuiImg
        }
      }).then(res=>{
        console.log(res);
        if(res.data.data=="成功"){
          wx.showToast({
            title: '反馈成功!',
            icon:"success"
          })
        }
      })
    }
  },


http://www.niftyadmin.cn/n/1038991.html

相关文章

微信小程序本地上传图片预览并删除

微信小程序本地上传图片&#xff0c;在小程序开发文档上面有说明&#xff1a; wx.chooseImage(Object object) | 微信开放文档 wx.previewImage(Object object) | 微信开放文档 wxml: 图片用wx:for循环&#xff0c;后面用带有加号的图片。 <view class"content"…

win8 php mysql_windows8.1下Apache+Php+MySQL配置步骤

软件版本&#xff1a;apache&#xff1a;Apache 2.4.6 Win64PHP&#xff1a;PHP 5.5 VC11 x64 Non Thread SafeMySql:5.5 win64Mysql安装&#xff1a;双击运行,设置用户名、密码、编码(utf8)。PHP配置&#xff1a;1、解压下载的zip文件到一个目录&#xff0c;本教程中为&#x…

微信小程序上拉加载

自己写demo,做一个微信小程序不通过后端传输数据本地循环数据上拉加载的效果。 效果是这样的&#xff0c;代码&#xff1a; wxml: <view class"contain"><view class"listCont"><view class"li" wx:for"{{arrayList}}&quo…

js常用的表单正则验证

var phoneReg /^1[3456789]\d{9}$/; //手机号码验证 var nameReg /^[\u4E00-\u9FA5]{2,4}$/; //中文名验证 var idReg /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证验证 let userName""; let phoneNum ""; let idCard ""; …

uniapp定时器定时刷新获取

要用uniapp做一个效果&#xff1a;页面定时刷新获取&#xff0c;根据时间变换状态。 这里按钮有5种状态&#xff1a;预约&#xff0c;已预约&#xff0c;已售罄&#xff0c;未开始&#xff0c;已结束。要把当前时间和后端返回的时间做对比&#xff0c;如果还没到开始时间则显示…

搭建 php+mysql+nginx_php+mysql+nginx+liunx 服务搭建

安装php7相应的yum源CentOS 7.x:# rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm# rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpmCentOS 6.x:# rpm -Uvh https://mirror.webtatic.com/yum/el6/latest.rpm查看版本y…

记录一次用vant框架做h5微信公众号

这次是用vant框架做一个h5微信公众号&#xff0c;是在我一同事封装的基础上开发的。封装的项目在gitee上的地址&#xff1a;湖南巨仑网络科技有限公司/vant-H5移动端封装 - Gitee.com。内容有底部导航的&#xff0c;轮播的&#xff0c;时间转时间戳的&#xff0c;axios请求的一…

php如何实现从mysql查询功能_PHP实现MYSQL的查询功能

展示数据库header(Content-Type: text/html;charsetutf-8);$host "127.0.0.1";$port 3306;$user root;$pass 123654;$charset utf8; //设置默认字符$link mysql_connect("$host:$port",$user,$pass); //链接数据库$sql show databases; //展示数据s…