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(); }
可上传多张到服务器
提交可将获取到的服务器图片名数组保存到表,再根据服务器域名+表中存入的图片名显示图片