小程序实现图片上传功能

 

 

<view class="themeHeader">
	<view class="theme">
		<view class="themeName">反馈主题</view>
		<view class="themeInput"><input placeholder="请输入反馈主题" bindinput="bindTitle" value="{{title}}"></input></view>
	</view>
</view>
<view>
	<textarea class="textarea" placeholder="反馈内容" maxlength="300" bindinput="bindContent" value="{{con}}"></textarea>
</view>
<!-- 图片 -->
<view class="picture">
	<view class="title">上传照片</view>
	<view class="upLoad">
		<view class="uplaodImgItem" wx:for="{{pic}}" wx:key="index">
			<image src="{{item}}"></image>
			<view class="deleteImg" bindtap="bindDeleteImg" data-index="{{index}}"><text class="iconfont icon-chahao"></text></view>
		</view>
		<view class="uploadImg" bindtap="bindUpload"><text class="iconfont icon-xiangji"></text></view>
	</view>
</view>

<!-- 选择区域 -->
<view class="area">
	<view class="areaTitle">
		<view class="selectArea">选择区域</view>
		<!-- <view class="areaLevel">三级区域 <text class="iconfont icon-xiangyou"></text></view> -->
		<van-dropdown-menu active-color="#cb964a">
			<van-dropdown-item bind:change="bindAreaLinkMan" value="{{value}}" options="{{ areaLinkMan }}" />
		</van-dropdown-menu>
	</view>
	<view hidden="{{hidden}}" style="border-top:2rpx solid #ebedf0">
		<view class="areaHead">该区域负责人</view>
		<view class="headName">
			<view class="name" wx:for="{{linkMan}}" wx:key="index" wx:if="{{linkMan.length != 0}}">{{item.nickname}}</view>
			<view wx:if="{{linkMan.length == 0}}">无</view>
		</view>
	</view>
</view>

<!-- 提交 -->
<view class="submit" bindtap="bindSubmit">提交</view>

/* pages/feedback/index.wxss */
@import "../../wxss/iconfont.wxss";
@import"../../wxss//base.wxss";

page {
  background: #f7f8fa;
}

.themeHeader {
  background: #ffffff;
}

.theme {
  display: flex;
  align-items: center;
  height: 88rpx;
  background: #ffffff;
  margin-left: 32rpx;
  border-bottom: 2rpx solid #ebedf0;
}

.themeName {
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #323233;
  margin-right: 32rpx;
}

.themeInput {
  flex: 1;
}

.themeInput input {
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #969799;
  flex: 1;
}

.textarea {
  width: 100%;
  height: 284rpx;
  background: #ffffff;
  padding: 18rpx 32rpx;
  box-sizing: border-box;
}

/* 图片 */
.picture {
  background: #ffffff;
  margin-top: 16rpx;
  margin-bottom: 16rpx;
  padding: 32rpx;
}

.title {
  height: 36rpx;
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #323233;
  line-height: 36rpx;
  margin-bottom: 24rpx;
}

.upLoad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.uplaodImgItem {
  width: 160rpx;
  height: 160rpx;
  margin-right: 16rpx;
  position: relative;
}

.uplaodImgItem image {
  width: 100%;
  height: 100%;
}

.deleteImg {
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 0px 4rpx 0px 200rpx;
  top: 0;
  right: 0;
  text-align: right;
  line-height: 24rpx;
}

.icon-chahao {
  color: #ffffff;
  font-size: 26rpx;
}

.uploadImg {
  width: 160rpx;
  height: 160rpx;
  line-height: 160rpx;
  text-align: center;
  background: #f7f8fa;
  border-radius: 4rpx;
}

.icon-xiangji {
  color: #859db6;
  font-size: 38rpx;
}

/* 选择区域 */
.area {
  background: #ffffff;
  padding-left: 32rpx;

}

.areaTitle {
  display: flex;
  align-items: center;
  height: 88rpx;
  justify-content: space-between;
  /* border-bottom: 1px solid #ebedf0; */
  padding-right: 32rpx;
}

.selectArea {
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #323233;
}

.areaLevel {
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: right;
  color: #999999;
}

.icon-xiangyou {
  font-size: 24rpx;
  color: #969799;
  padding-right: 32rpx;
}

.areaHead {
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #323233;
  padding: 26rpx 0 14rpx 0;
}

.headName {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 68rpx;
}

.name {
  margin-right: 10rpx;
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #969799;
}

.submit {
  margin: 48rpx 64rpx;
  height: 88rpx;
  background: #cb964a;
  border-radius: 44rpx;
font-size: 32rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 88rpx;
}
.van-dropdown-menu {
  background-color: none !important;
  background: transparent;
  height: 80rpx !important;
}

 

{
  "usingComponents": {
    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "@vant/weapp/dropdown-item/index"
  },
  "navigationBarBackgroundColor": "#CB964A",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "反馈",
  "backgroundColor": "#CB964A",
  "backgroundTextStyle": "light"
}

//删除照片
   bindDeleteImg:function(e){
    var imgIndex = e.currentTarget.dataset.index;
    var that = this;
    that.data.pic.map(function(item,index){
      if(imgIndex == index){
        that.data.pic.splice(index,1);
        that.setData({
          pic:that.data.pic
        })
      }
    })
    that.data.imgUrl.map(function(item,index){
      if(imgIndex == index){
        that.data.imgUrl.splice(index,1);
        that.setData({
          imgUrl:that.data.imgUrl
        })
      }
    
    })
  },
   //上传照片
   bindUpload:function(e){
    var that = this;
    var picLength = this.data.pic.length;
    var count = 9-picLength;
    if(count != 0){
      wx.chooseImage({
        count: count,
        success:function(res){
          console.log(res);
          wx.showLoading({
            title: '上传中...',
        })
          const tempFilePaths = res.tempFilePaths;
          var i = 0;//第几张图片的index；
          var successImgCount = 0;//成功的图片数量；
          var failImgCount = 0;//失败的图片数量;
          var imgLength = res.tempFilePaths.length;//上传的图片长度；
          tempFilePaths.map(function(item,index){
            that.data.pic.push(tempFilePaths[index]);
          })
          that.setData({
            pic:that.data.pic
          });
          imageUp.uploadImg(that,tempFilePaths,successImgCount,failImgCount,imgLength,i);
          console.log(that.data.imgUrl)
        },
        fail:function(res){
          console.log(res);
        }
      })
    }else {
      wx.showToast({
        title: '最多上传9张照片',
        icon:"none"
      })
    }
  },

 
 var api = require("../config/api.config.js").api;
 //上传照片
 function uploadImg(that,tempFilePaths,successImgCount,failImgCount,imgLength,i){
  var that = that;
  // console.log(tempFilePaths);
  // console.log("上传成功照片："+successImgCount);
  // console.log("上传失败照片"+failImgCount);
  // console.log("图片长度"+imgLength);
  // console.log("上传第"+i+"张");
  wx.uploadFile({
    filePath: tempFilePaths[i],
    name: 'file',
    url: api.upload,
    formData: {
      file: '',
      filetype: 'image'
  },
    success:function(res){
      console.log(JSON.parse(res.data) );
      if(res.statusCode == 200){//图片上传成功
          ++successImgCount;
          that.data.imgUrl.push(JSON.parse(res.data).data.url)
          that.setData({
            imgUrl:that.data.imgUrl
          })        
      }else{
        wx.showModal({
          title: '提示',
          content: res.data.msg,
          showCancel: false
      })
      }
    },
    fail:function(res){
      console.log(res);
      wx.hideLoading();
      ++failImgCount;
    },
    complete:function(res){
      console.log("上传成功照片："+successImgCount);
  console.log("上传失败照片"+failImgCount);
  console.log("图片长度"+imgLength);
  console.log("上传第"+i+"张");
      i++;
      if(i == imgLength){
        console.log("结束");
        wx.hideLoading();
      }else {
        uploadImg(that,tempFilePaths,successImgCount,failImgCount,imgLength,i);
      }
    }
  })
}

module.exports = {
  uploadImg:uploadImg
}

如果体验版小程序上传照片有问题 请参考https://blog.csdn.net/Acitylion/article/details/108069693;

/*上传照片成功之后会刷新页面，如果微信登录写在app.js onshow的话会触发，我把token存到本地 每次上传照片的时候token都会刷新，所以提交的的时候获取token都不是最新的,因为每次上传照片相当于退出微信小程序，所以上传完照片相当于重新进入小程序 所以会触发app.js 的onshow*/