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

 

wxml文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

.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自理

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

// 上传图片  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接口文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

[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(); }

 补：data

?

1 2 3 4 5 6

data:{     imgs:[],     imgsone:[],     jstone:-1,       }

　　

可上传多张到服务器

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