现在微信小程序拍照上传的需求越来越多了，绝大部分小程序项目都会用到，虽然技术上没什么难度，但对于初学者来说，也是件费时费力的事情，三年前我在写这些代码的时候也是花费好几天的时间，最近有点空闲时间，于是就决定整理一下发布出来，有不足之处请多批评指正，废话不多说，先上效果图。
源代码下载地址：微信小程序仿朋友圈上传图片到服务器，后端通过C#实现-小程序文档类资源-CSDN下载微信小程序仿朋友圈上传图片到服务器，后端通过C#实现更多下载资源、学习资料请访问CSDN下载频道./download/yang_computer/74929779
一、小程序端代码
1、wxml页面
<view class="searchTitle">开始服务<text>请在服务开始前至少上传三张现场照片</text></view><view class="serviceContent"><view class="picList"><view wx:for="{{picList}}" wx:key='index' bindtap="handleImagePreview" wx:for-index="idx" data-idx="{{idx}}" class="picView"><image class="pic" mode="aspectFill" src="{{item.filePath}}"></image><view class="delView" data-idx="{{idx}}" catchtap="delPic"><i class="fa fa-trash-o fa-lg"></i></view></view><view class="picAdd" wx:if="{{picList.length<9}}" bindtap="chooseimage"><image src="/img/addPic.png"></image></view></view><view class="inputItem"><textarea bindinput="fwbzInput" value="{{fwbz}}" placeholder="服务备注"></textarea></view><view class="smallItem location"><image class="smallImg" mode="widthFix" src="/img/address.png"></image><text wx:if="{{address!=''}}" class="smallText">{{tag}}位置：{{address}}</text><text wx:else class="smallText">{{tag}}位置：位置获取中...</text></view></view><view class="btnView"><button id="saveBtn" bindtap="save" class="btnStyle" type="warn">提 交</button><button id="submitBtn" bindtap="back" style="margin-left:30rpx;" class="btnStyle" type="warn">返 回</button></view>
2、wxss页面
.searchTitle{height: 35px;background-color: #f7fcff;margin-top: 10rpx;border-top: solid 1px #e6e6e6;border-left: solid 1px #e6e6e6;border-right: solid 1px #e6e6e6;font-size: 14px;line-height: 40px;padding-left: 15px;color: #000;display: flex;flex-direction: row;align-items: center;}.btnStyle{letter-spacing: 3px;flex-grow: 1;color: #fff;}.btnView{display: flex;flex-direction: row;justify-content: space-between;margin-top: 20rpx;flex-grow: 1;}.searchTitle text{font-size: 12px;margin-left: 10rpx;color: #999;}.serviceContent{border: solid 1px #e6e6e6;}.picList {display: flex;flex-direction: row;align-items: center;border-bottom: solid 1px #f3f3f3;padding: 20rpx;padding-top: 0rpx;padding-right: 0rpx;flex-wrap: wrap;justify-content: flex-start;}.picView{width: 210rpx;height: 210rpx;background-color: #f3f3f3;margin-top: 20rpx;margin-right: 20rpx;position: relative;}.pic{width: 210rpx;height: 210rpx;background-color: #f3f3f3;}.delView{background-color: #ff0000;height: 56rpx;width: 56rpx;position:absolute;right: 0px;left: auto;top: 0px;color: #fff;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 28rpx;}.picAdd{width: 210rpx;height: 210rpx;background-color: #f3f3f3;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20rpx;}.picAdd:hover{background-color: #e3e3e3;}.picAdd image{width: 100rpx;height: 80rpx;}.location:hover{color: #2ab6ff;}.smallImg{height: 20px;width: 20px;}.smallText{flex-grow: 1;font-size: 14px;margin-left: 10px;}.smallItem {display: flex;flex-direction: row;align-items: center;margin-left: 20rpx;margin-right: 20rpx;justify-content: center;min-height: 40px;}.inputItem{display: flex;flex-direction: row;justify-items: center;align-items: center;border-bottom: solid 1px #f3f3f3;margin-left: 20rpx;margin-right: 20rpx;justify-content: space-between;}.inputItem text{width: 80px;padding-top: 12px;padding-bottom: 12px;flex-grow: 0;flex-shrink: 0;}.inputItem input{flex-grow: 1;}.inputItem textarea{flex-grow: 1;margin-top: 10rpx;height: 100rpx;}.location_hover{color: #ff4c0d;}
3、js页面
var app=getApp();Page({/*** 页面的初始数据*/data: {address:"",picList:[],latitude:0,longitude:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getPosition();//获取位置信息},chooseimage: function () {//选择图片var that = this;wx.chooseImage({count: 9 - this.data.picList.length, // 默认9sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有//'original', 'compressed'sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有'album', 'camera'success: function (res) {wx.showLoading({title: '图片上传中...',})that.uploadImage(res.tempFilePaths, 0, that);}})},uploadImage: function (uploadingImages,i,that)//上传照片{var images = that.data.picList;var uploadImgPath = uploadingImages[i];var imgObj = new Object();imgObj.filePath = "/img/upLoading.png";images.push(imgObj);that.setData({picList: images});//上传照片wx.uploadFile({url: app.globalData.baseUrl + "upLoadImage.ashx",filePath: uploadImgPath,name: "file",header: {"Content-Type": "multipart/form-data"},success: function (res) {var resImg = JSON.parse(res.data);var imgObj = images[images.length-1];imgObj.filePath = uploadImgPath;imgObj.imgUrl = resImg.imgUrl;imgObj.smallImgUrl = resImg.smallImgUrl;imgObj.size = resImg.size;that.setData({picList: images});//上传下一张照片i++if (i < uploadingImages.length){that.uploadImage(uploadingImages, i, that);}else{wx.hideLoading();}}})},handleImagePreview(e) {//预览图片const idx = e.currentTarget.dataset.idx;const images = [];for (var i = 0; i < this.data.picList.length;i++){images.push(this.data.picList[i].filePath);}wx.previewImage({current: images[idx], //当前预览的图片urls: images, //所有要预览的图片})},delPic:function(e){//删除图片var idx = e.currentTarget.dataset.idxvar tempList = this.data.picList;tempList.splice(idx, 1);this.setData({picList:tempList});},getPosition() {//获取地理位置信息let that = this;wx.getLocation({type: 'wgs84',success: function (res) {var latitude = res.latitude;var longitude = res.longitude;that.setData({latitude: latitude,longitude: longitude});var location = latitude + "," + longitude;wx.request({url: app.globalData.url,data: {appid: app.globalData.appid,action: "getAddress",location: location},method: 'GET',success: (res) => {if (res.statusCode == 200 && res.data.status == 0) {var country = res.data.result.address_component.nation;//国家var province = res.data.result.address_component.province;//省var city = res.data.result.address_component.city;//市var county = res.data.result.address_component.district;//区var street = res.data.result.address_component.street;//街道var address = country + province + city + county + street;that.setData({address: address});}}})},fail() {that.setData({address: "位置获取失败"});}})},back:function(e){wx.navigateBack({});},save:function(e){var that=this;if (this.data.picList.length<3) {app.showMsg("请至少拍摄三张照片。");return;}wx.showLoading({title: '数据保存中...',mask: true});var picTempList=[];for(var i=0;i<that.data.picList.length;i++){var pic=that.data.picList[i];var picTemp=new Object();picTemp.name = pic.imgUrl;picTemp.path = "UploadFile/"+pic.imgUrl;picTemp.smallImgUrl = "UploadFile/"+pic.smallImgUrl;picTemp.size = pic.size;picTempList.push(picTemp);}var picJson=JSON.stringify(picTempList);console.log(picJson);//将picJson做为参数传到服务器，由服务器写入数据库，后面的代码就省略了...},})
二、后端代码
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web;using System.Web.Script.Serialization;namespace PicUpload{/// <summary>/// upLoadImage 的摘要说明/// </summary>public class upLoadImage : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";try{HttpFileCollection files = context.Request.Files;if (files.Count > 0){string imgName = DateTime.Now.ToString("yyyyMMddhhmmssfff");string oldFileName = System.IO.Path.GetFileName(files[0].FileName);string hz = "";if (oldFileName.IndexOf(".") >= 0){hz = oldFileName.Substring(oldFileName.LastIndexOf(".")).Trim();}string path = context.Server.MapPath("/UploadFile/");files[0].SaveAs(path + imgName + hz);//生成缩略图MakeThumbnail(path + imgName + hz, path + imgName + "slt" + hz, 300, 300, "DB", hz);Image img = new Image();img.size = files[0].ContentLength;img.imgUrl = imgName + hz;img.smallImgUrl = imgName + "slt" + hz;img.tag = "1";img.msg = "上传成功！";img.fileName = img.imgUrl;string res = getJsonStr(img).ToString();context.Response.Write(res);}}catch (Exception ex){context.Response.Write(ex.ToString());}}#region 将对象转换为Json数据public static System.Text.StringBuilder getJsonStr(object o){JavaScriptSerializer jss = new JavaScriptSerializer();StringBuilder sb = new StringBuilder();jss.Serialize(o, sb);return sb;}#endregion#region 生成缩略图/// <summary>/// 生成缩略图/// </summary>/// <param name="originalImagePath">源图路径（物理路径）</param>/// <param name="thumbnailPath">缩略图路径（物理路径）</param>/// <param name="width">缩略图宽度</param>/// <param name="height">缩略图高度</param>/// <param name="mode">生成缩略图的方式。"HW"：指定高宽缩放（可能变形），"W"：指定宽，高按比例，"H"：指定高，宽按比例，"Cut"：指定高宽裁减（不变形），"DB"：等比缩放（不变形，如果高大按高，宽大按宽缩放）</param>public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode, string type){System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);int towidth = width;int toheight = height;int x = 0;int y = 0;int ow = originalImage.Width;int oh = originalImage.Height;switch (mode){case "HW"://指定高宽缩放（可能变形）break;case "W"://指定宽，高按比例toheight = originalImage.Height * width / originalImage.Width;break;case "H"://指定高，宽按比例towidth = originalImage.Width * height / originalImage.Height;break;case "Cut"://指定高宽裁减（不变形）if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight){oh = originalImage.Height;ow = originalImage.Height * towidth / toheight;y = 0;x = (originalImage.Width - ow) / 2;}else{ow = originalImage.Width;oh = originalImage.Width * height / towidth;x = 0;y = (originalImage.Height - oh) / 2;}break;case "DB"://等比缩放（不变形，如果高大按高，宽大按宽缩放）if ((double)originalImage.Width / (double)towidth < (double)originalImage.Height / (double)toheight){toheight = height;towidth = originalImage.Width * height / originalImage.Height;}else{towidth = width;toheight = originalImage.Height * width / originalImage.Width;}break;default:break;}//新建一个bmp图片System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);//新建一个画板System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);//设置高质量插值法g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;//设置高质量,低速度呈现平滑程度g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;//清空画布并以透明背景色填充g.Clear(System.Drawing.Color.Transparent);//在指定位置并且按指定大小绘制原图片的指定部分g.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, towidth, toheight),new System.Drawing.Rectangle(x, y, ow, oh),System.Drawing.GraphicsUnit.Pixel);try{//保存缩略图switch (type.ToLower()){case ".jpg":bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);break;case ".bmp":bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Bmp);break;case ".gif":bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Gif);break;case ".png":bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Png);break;}}catch (System.Exception e){throw e;}finally{originalImage.Dispose();bitmap.Dispose();g.Dispose();}}#endregionpublic bool IsReusable{get{return false;}}}public class Image{public string imgUrl;public string smallImgUrl;public int size;public string tag;public string msg;public string fileName;}}
如果觉得《微信小程序仿朋友圈上传图片到服务器 后端通过C#实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
