C#实现微信小程序图片上传

C#后端接口：

public string FileUploads()
{string parameters = "";try{string path = "/tmp/";HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["content"];//对应小程序nameparameters = string.Format("postData:{0}", file.ToString());//获取文件if (file != null){Stream sr = file.InputStream;//文件流Bitmap bitmap = (Bitmap)Bitmap.FromStream(sr);path += file.FileName;string currentpath = System.Web.HttpContext.Current.Server.MapPath("~");bitmap.Save(currentpath + path);}return "{\"code\": 1, \"msg\": \"上传成功！\", data: \"" + strPath + "\"}";}catch (Exception ex){return "{\"code\": -1, \"msg\": \"上传图片异常：" + ex.Message + "\"}";}
}

微信小程序端：

wxml：

<view class="imgBox"><block wx:for="{{img_arr}}" wx:key="index"><view class='logoinfo'><image class='logoinfo' mode="aspectFill" src='{{item}}' data-index="{{index}}" bindtap="previewImg" bindlongpress="deleteImg" name="headimage" >image>view>block><image bindtap='getLocalityImg' class='logoinfo' src="../../images/icon/xj.png">image>
view>
<button bindtap="uploadFiles" style="margin-top:50rpx;">提交button>

wxss：

.imgBox {font-size: 28rpx;margin: 3%;background: white;padding: 30rpx;border-radius: 30rpx;display: flex;align-items: center;
}
.logoinfo {height: 180rpx;width: 180rpx;margin: 10rpx ;display: inline-block;
}

js：

Page({/*** 页面的初始数据*/data: {img_arr: [], //图片存放的数组},//上传图片到服务器 uploadFiles(){var that = thisvar adds = that.data.img_arr;for (let i = 0; i < this.data.img_arr.length; i += 1) {wx.uploadFile({url: Url,//接口地址filePath: that.data.img_arr[i],name: 'content',formData: {'user': adds},success: function (res) {let data = JSON.parse(res);if (data.code == 1) {console.log(data.data);wx.showToast({title: data.msg,duration: 3000});}else{wx.showToast({title: data.msg,duration: 3000});}}})}},//从本地获取照片 getLocalityImg() {let that = this;if (this.data.img_arr.length < 5) {wx.chooseImage({count: 5 - that.data.img_arr.length, //上传图片的数量 当之前上传了部分图片时 ,总数 - 已上传数 = 剩余数   (限制上传的数量)sizeType: ['original', 'compressed'],//可以指定原图或压缩图,默认二者都有sourceType: ['album', 'camera'],//指定图片来源是相机还是相册,默认二者都有success(res) {console.log(res, "上传图片")const tempFiles = res.tempFiles //包含图片大小的数组let answer = tempFiles.every(item => {//限制上传图片大小为2M,所有图片少于2M才能上传return item.size <= 2000000})if (answer) {that.setData({img_arr: that.data.img_arr.concat(res.tempFilePaths),})}else{wx.showToast({title:'上传图片不能大于2M!',icon:'none'    })}}})} else {wx.showToast({  //超过图片张数限制提示title: '最多上传五张图片',icon: 'none',duration: 2000})}},//删除照片功能与预览照片功能 deleteImg(e) {let that = this;let img_arr = that.data.img_arr;let index = e.currentTarget.dataset.index;  //获取长按删除图片的indexwx.showModal({title: '提示',content: '确定要删除此图片吗？',success(res) {if (res.confirm) {// console.log('点击确定了');img_arr.splice(index, 1);} else if (res.cancel) {// console.log('点击取消了');return false;}that.setData({img_arr: img_arr});}})},//预览图片previewImg(e) {let index = e.currentTarget.dataset.index;let img_arr = this.data.img_arr;wx.previewImage({current: img_arr[index],urls: img_arr})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！