入坑微信小程序必经之路（六）图片上传服务器——WebSercice接口

本文主要是介绍入坑微信小程序必经之路（六）图片上传服务器——WebSercice接口，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

wxml文件

<view class="weui-uploader">
  <view class="img-v weui-uploader__bd">
    <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
        <image class='weui-uploader__img' 
                src="{{urlimg}}{{item}}"
                data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
                  <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
        </image>
    </view>
     
      <!-- 用来提示用户上传图片 -->
      <view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
  </view>
  <button class="upload-img-btn" bindtap="chooseImg" type='primary' style="background-color:#ffcb63;">拍照  / 上传</button>
</view>

CSS文件

.img{
  display: inline-block;
}
 
.pic {
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}
 
.delete-btn{
  position: absolute;
  top: 0;
  right: 0;
}
 
.weui-uploader{
  padding: 10rpx;
}
 
 
.lineHeight {
  width: 100%;
  line-height: 80rpx;
  border-bottom: 1px solid #ccc;
  font-size: 30rpx;
}
.container {
  padding: 0;
  align-items: left;
  padding-left: 15rpx;
}
.numberInfo {
  font-size: 24rpx;
  text-indent: 15rpx;
  border-bottom: 1px solid #ccc;
}
 
/* .input {
  display: inline-block;
  border: 1px solid #ccc;
  line-height: 80rpx;
  vertical-align: middle;
  margin-left: 11%;
  width: 75%;
} */
.input,
.input-7 ,
.input-15{
  margin-left: 7%;
  display: inline-block;
  /* border: 1px solid #ccc; */
  line-height: 80rpx;
  vertical-align: middle;
  width: 75%;
}
.input{
  margin-left: 11%;
}
 
button {
  width: 100%;
  margin-top: 30rpx;
}
.select{
  margin-left: 7%;
  color: #666;
}
 
.input-15{
  margin-left:15%;
}

JS文件——data自理

 // 上传图片
  chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
            that.setData({
              jstone:that.data.jstone+1,
            })
          var js=that.data.jstone;
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs
            });
            that.upLoad(tempFilePaths[i],js);
            return false;
          } else {
            that.upLoad(tempFilePaths[i],js);
            imgs.push(tempFilePaths[i]);
          }
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs
        });
        console.log(that.data.imgsone);
      }
    });
  },
  upLoad(filePath,index){//上传图片到服务器
   var url=app.globalData.url+"img_upload";
   wx.showToast({
    icon: "loading",
    title: "正在上传"
    }),
    wx.uploadFile({
      url: url,       //服务器路径
      filePath: filePath,    //图片文件
      name: 'file',
      formData: null,
      header: {
        'content-type':'application/json'
       },
      success: res => {
        // console.log(index);
        this.setData({
          ['imgsone['+ index +']']:JSON.parse(res.data),      
        })
        // console.log(JSON.parse(res.data));
        // console.log(this.data.imgsone);
      }
    })
  },

  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    console.log(imgs);
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls:imgs
    })
  },

WebService接口文件

        [WebMethod]//上传图片
        public void img_upload()//接收图片
        {
            string result = string.Empty;//返回图片路径
            string fileExtension;//文件扩展名
            string shijian;//当前时间
            string newname;//新文件名
            string currentpath;//网站根目录
            try
            {
                string path = "/UpLoadFilesimages/";
                HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["file"]; //对应小程序 name

                //获取文件
                if (file != null)
                {
                    Stream sr = file.InputStream;        //文件流
                    Bitmap bitmap = (Bitmap)Bitmap.FromStream(sr);
                    //取得文件的扩展名,并转换成小写
                    fileExtension = System.IO.Path.GetExtension(file.FileName).ToLower();
                    //获取当前时间
                    //shijian = DateTime.Now.ToLocalTime().ToString("yyyyMMddhhssmm");
                    shijian = string.Format("{0}{1}", DateTime.Now.ToString("yyyyMMddHHmmss"), GetUniqueKey1());
                    //合成新产生的文件名
                    newname = shijian + fileExtension;
                    path += newname;
                    currentpath = System.Web.HttpContext.Current.Server.MapPath("~");

                    bitmap.Save(currentpath + path);
                }
                result = path;//返回图片路径
            }
            catch (Exception vErr)
            {
                result = vErr.Message;
            }
            Context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(result));
            Context.Response.End();

        }
        public string GetUniqueKey1()
        {
            int maxSize = 8;
            int minSize = 5;
            char[] chars = new char[62];
            string a;
            a = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
            chars = a.ToCharArray();
            int size = maxSize;
            byte[] data = new byte[1];
            RNGCryptoServiceProvider crypto = new RNGCryptoServiceProvider();
            crypto.GetNonZeroBytes(data);
            size = maxSize;
            data = new byte[size];
            crypto.GetNonZeroBytes(data);
            StringBuilder result = new StringBuilder(size);
            foreach (byte b in data)
            {
                result.Append(chars[b % (chars.Length - 1)]);
            }
            return result.ToString();
        }　

可上传多张到服务器

 提交可将获取到的服务器图片名数组保存到表，再根据服务器域名+表中存入的图片名显示图片

这篇关于入坑微信小程序必经之路（六）图片上传服务器——WebSercice接口的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！