小程序页面
<view wx:if="{{tempFilePath}}" class="choose-pic" bindtap="openModalPic"> {{tempFilePath?'重新选择图片':'选择图片'}} view> <view wx:else class="upload-pic-btn"> <image src="{{upload_btn_pic}}" bindtap="openModalPic">image> view> <view class="pre-view-image" hidden="{{!tempFilePath}}"> <image src="{{tempFilePath}}" bindtap="preView">image> view> <view class="image-size" hidden="{{!tempFilePath||is_update_pic}}"> <view class="image-size-title"> 图片大小: view> <view class="image-size-value "> {{size_unit_m}}M view> view> <view class=" {{max_size>=size?'image-size-tip':'image-size-error'}} " hidden="{{!tempFilePath||is_update_pic}}"> 限制上传大小2M,当前图片大小为{{size_unit_m}}M，{{max_size>=size?'大小合适':'图片过大，请重新选择！'}} view> <view class="oper-list" hidden="{{!tempFilePath}}"> <view class="oper-item" bindtap="backPage"> 返回 view> <view class="oper-item" bindtap="uploadPic" hidden="{{is_update_pic}}"> 上传 view> view>
小程序 样式
.choose-pic { height: 88rpx; align-items: center; display: flex; align-items: center; justify-content: center; background: #616EFB; color: #fff; width: 80%; margin: 20rpx 10%; border-radius: 16rpx; } page { font-family: Source Han Sans CN; background: #fff; } .pre-view-image { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 100rpx; } .pre-view-image image { border-radius: 8rpx; } .oper-list { display: flex; position: fixed; align-items: center; width: 100%; bottom: 0rpx; height: 112rpx; border-top: 1rpx solid #E8E9EE; } .oper-item { flex: 1; background: #616EFB; color: #fff; margin: 0rpx 50rpx; height: 78rpx; border-radius: 12rpx; font-size: 30rpx; align-items: center; display: flex; justify-content: center; } .image-size { height: 88rpx; display: flex; align-items: center; font-size: 28rpx; background: #EBF3FF; margin: 32rpx; color: #424656; padding-left: 24rpx; } .image-size-title { padding-right: 24rpx; } .image-size-value { font-weight: 700; } .image-size-error { font-size: 26rpx; margin: 32rpx; color: #F3273C; padding-left: 24rpx; } .image-size-tip { font-size: 26rpx; margin: 32rpx; color: #7A7D88; padding-left: 24rpx; } .upload-pic-btn { width: 100%; text-align: center; margin-top: 40%; } .upload-pic-btn image { width: 360rpx; height: 248rpx; }
小程序JS
const app = getApp(); const http = require('../../../utils/http.js'); const api = require('../../../config.js'); const utils = require('../../../utils/util.js'); const dateHelper = require('../../../utils/date.js'); const operHelper = require('../../../utils/oper.js'); const messageHelper = require('../../../utils/message.js'); Page({ /** * 页面的初始数据 */ data: { tempFilePath: '', tempFiles: '', max_size: 1024 * 1024 * 2,//最大2M size: 5, size_unit_m: 0,//格式化大小 M goods_info: null, upload_btn_pic: '', base_url: '', is_update_pic: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options); console.log(getCurrentPages()); let _this = this; let index = Number(options.index); _this.setData({ upload_btn_pic: app.globalData.wxgh_oauth_url + '/Image/upload-pic.svg', index: index }); let pages = getCurrentPages(); let prePages = pages.filter(f => { return f.route === 'pages/BillBusiness/GoodsFiles/GoodsFiles' }); let prepagesLen = prePages.length; if (prepagesLen > 0) { let tempGoods = prePages[prepagesLen - 1].data.goods_list[index]; _this.setData({ goods_info: tempGoods, offlie_url: prePages[prepagesLen - 1].data.upload_pic_down_url, }); if (tempGoods.pic) { let shopid = app.globalData.shopid; _this.setData({ is_update_pic: true }); if (shopid.startsWith('9') || shopid.startsWith('8')) { _this.setData({ tempFilePath: app.globalData.wxgh_oauth_url + tempGoods.pic + '&random2=' + Date.now() }); } else { //多台机，指定上传到指定的服务器 _this.setData({ tempFilePath: "https://XXX" + tempGoods.pic + '&random2=' + Date.now() }); } } } }, openModalPic: function () { let _this = this; _this.setData({ tempFilePath: '', tempFiles: '', size: 0, size_unit_m: 0 }); wx.chooseImage({ count: 1, sizeType: ['compressed'],//只选择压缩的 sourceType: ['album', 'camera'], success: res => { console.log('success') console.log(res) if (res.errMsg === 'chooseImage:ok') { let _tempFilePaths = res.tempFilePaths; let _tempFiles = res.tempFiles; let _size = _tempFiles[0].size; _this.setData({ tempFilePath: _tempFilePaths[0], size_unit_m: (_size / 1024 / 1024).toFixed(2), size: _size, is_update_pic: false }); } }, fail: f => { console.log(f) }, complete: c => { console.log('complete') console.log(c) } }) }, backPage: function () { wx.navigateBack({ delta: 0, }) }, preView: function () { let _this = this; let _tempFilePath = _this.data.tempFilePath; wx.previewImage({ urls: [_tempFilePath], success: r => { console.log(r) }, fail: f => { console.log(f) }, }) }, uploadPic: function () { let _this = this; let _tempFilePath = _this.data.tempFilePath; if (!_tempFilePath) { wx.showToast({ title: '请先选择图片！', icon: 'none' }) return; } if (_this.data.size > _this.data.max_size) { wx.showToast({ title: '图片内容过大，请重新选择！', icon: 'none' }) return; } let goods = _this.data.goods_info; let shopid = app.globalData.shopid + ''; let uploadPath = ''; if (shopid.startsWith('9')) { uploadPath = app.globalData.wxgh_oauth_url + '/' + api.uploadPic; } else if (shopid.startsWith('1')) { uploadPath = "https://xxx" + '/' + api.uploadPic; } else { uploadPath = app.globalData.wxgh_oauth_url + '/' + api.uploadPic; } wx.showLoading({ title: '上传中...', mask: true }) wx.uploadFile({ filePath: _tempFilePath, name: 'file', url: uploadPath, formData: { "item_name": goods.item_name, "shopid": app.globalData.shopid, "sort_value": '0', "item_no": goods.item_no, "openid": app.globalData.openid, "offlie_url": _this.data.offlie_url }, header: { "Content-Type": "multipart/form-data", "chartset": "utf-8" }, timeout: 60000, success: res => { console.log(res) console.log(JSON.parse(res.data)) let _res = JSON.parse(res.data); if (_res.success) { let extensionNameIndex = _tempFilePath.lastIndexOf('.'); let _extensionName = _tempFilePath.substr(extensionNameIndex) let pages = getCurrentPages(); let prePages = pages.filter(f => { return f.route === 'pages/BillBusiness/GoodsFiles/GoodsFiles' }); let prepagesLen = prePages.length; if (prepagesLen > 0) { let tempGoodsList = prePages[prepagesLen - 1].data.goods_list; tempGoodsList[_this.data.index].pic = _res.data.path + '?=' + Date.now(); let picList = prePages[prepagesLen - 1].data.pic_list; if (picList.filter(f => { return f.item_no === goods.item_no }).length === 0) { picList.push({ item_no: goods.item_no, pic_name: goods.item_no + _extensionName + '?=' + Date.now(), pic_path: '/itempic/' + shopid + '/' + goods.item_no + '/' }); prePages[prepagesLen - 1].setData({ pic_list: picList }); } prePages[prepagesLen - 1].setData({ goods_list: tempGoodsList }); } wx.showModal({ content: '上传图片成功!', showCancel: false, confirmText: '确定', success: r => { wx.navigateBack() } }) } else { wx.showModal({ content: _res.message, showCancel: false, confirmText: '关闭' }) } }, fail: f => { console.log('上传失败~'); console.log(f) wx.showModal({ content: f.errMsg, showCancel: false, confirmText: '关闭' }) }, complete: c => { console.log('上传完成~'); console.log(c) wx.hideLoading({ }) } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
.net core 实现接口
处理图片
#region 上传图片 [HttpPost] [DontWrapResult] public async Task UploadPic(IFormFile file) { var _result = new Result(); try { var shopid = _httpContext.HttpContext.Request.Form["shopid"].ToString(); var item_no = _httpContext.HttpContext.Request.Form["item_no"].ToString(); var item_name = _httpContext.HttpContext.Request.Form["item_name"].ToString(); var sort_value = _httpContext.HttpContext.Request.Form["sort_value"].ToString(); var openid = _httpContext.HttpContext.Request.Form["openid"].ToString(); var offlie_url = _httpContext.HttpContext.Request.Form["offlie_url"].ToString(); string oper_id = ""; var operinfo = await _operInfoRepository.FirstOrDefaultAsync(i => i.shopid == shopid && i.openid == openid); if (operinfo == null) { _result.success = false; _result.message = "操作员不存在，请重新绑定操作员！"; return _result; } oper_id = operinfo.oper_id; offlie_url = offlie_url.Trim(); int sortValue = 0; if (!string.IsNullOrWhiteSpace(sort_value)) { int.TryParse(sort_value.Trim(), out sortValue); } var fileName = file.FileName; string Extension = Path.GetExtension(fileName);//获取文件的源后缀 if (string.IsNullOrEmpty(Extension)) { _result.message = "文件上传的原始名称错误，没有找到文件后缀"; _result.success = false; return _result; } fileName = item_no + Extension; string rootdir = AppContext.BaseDirectory; DirectoryInfo Dir = Directory.GetParent(rootdir); string root = Dir.FullName; var dissss = Environment.CurrentDirectory; string dicPath = Path.Combine(root + "/wwwroot/itempic/" + shopid + "/" + item_no); if (!Directory.Exists(dicPath)) { Directory.CreateDirectory(dicPath); } var fullName = dicPath + "/" + fileName; if (File.Exists(fullName)) { File.Delete(fullName); } //打开上传文件的输入流 Stream stream = file.OpenReadStream(); //开始保存拷贝文件 file.CopyTo(new FileStream(fullName, FileMode.Create)); stream.Dispose();
//将上传到服务器上的图片，转存到指定IP的客户机器 var saveResult = await _sheetDataService.SendOfflineUploadPic(new BossHelpUploadPicRequest() { itemno = item_no, shopid = shopid, upitempicurl = offlie_url, file_name = fileName, oper_id = oper_id }); Logger.Error("SendOfflineUploadPic:" + JsonConvert.SerializeObject(saveResult)); if (saveResult.Code == 0) { _result.message = saveResult.Message; _result.success = false; _result.data = saveResult.Data; return _result; } if (_itemInfoPicRepository.Count(a => a.shopid == shopid && a.item_no == item_no) == 0) { var itemInfoPic = new ItemInfoPic() { sort_value = sortValue, shopid = shopid, add_date = DateTime.Now, item_name = item_name, item_no = item_no, openid = openid, pic_name = fileName, pic_path = "/itempic/" + shopid + "/" + item_no + "/", }; await _itemInfoPicRepository.InsertAsync(itemInfoPic); } _result.data = new { temp_data = saveResult.Data, path = "/itempic/" + shopid + "/" + item_no + "/" + fileName }; _result.success = true; } catch (Exception ex) { _result.success = false; _result.message = ex.Message; Logger.Error("UploadPic 异常：" + ex.Message + "|" + ex.StackTrace); } return _result; } #endregion
实现将保存服务器上图片，转存到指定的客户机器
#region 上传图片到产品端 [DontWrapResult] public async Task<Response> SendOfflineUploadPic(BossHelpUploadPicRequest model) { var _result = new Response(); try { //string sfile = @"E: estpic estbosshelp.jpg"; //sfile = model.filePath; string upload_url = model.upitempicurl + "/api/ItemApi/UploadFile";// "http://xxx/api/ItemInfo/UploadFile"; string rootdir = AppContext.BaseDirectory; System.IO.DirectoryInfo Dir = System.IO.Directory.GetParent(rootdir); //string root = Dir.Parent.Parent.Parent.FullName; string root = Dir.FullName; string localPath = System.IO.Path.Combine(root + "/wwwroot/itempic/" + model.shopid + "/" + model.itemno + "/" + model.file_name); string fileName = localPath;// sfile;//文件全路径(e:abc.txt) string safeFileName = System.IO.Path.GetFileName(fileName);//文件名(abc.txt) System.Net.WebClient client = new System.Net.WebClient(); client.Credentials = System.Net.CredentialCache.DefaultCredentials; client.Headers.Add("Content-Type", "application/form-data");//注意头部必须是form-data client.QueryString["fname"] = safeFileName; client.QueryString["item_no"] = model.itemno; client.QueryString["oper_id"] = model.oper_id; byte[] fileb = client.UploadFile(new Uri(upload_url), "POST", fileName); string res = System.Text.Encoding.UTF8.GetString(fileb); var _data = JsonConvert.DeserializeObject(res.Replace(" ", "")); if (_data == null) { _result.Message = "返回null"; _result.Code = 0; return _result; } else { if (_data.success == "false") { _result.Message = _data.message; _result.Code = 0; return _result; } _result.Data = _data; _result.Code = 1; } } catch (Exception ex) { Logger.Error("SendOfflineUploadPic异常：" + model.shopid + ",Message:" + ex.Message + ",StackTrace:" + ex.StackTrace); _result.Message = "SendOfflineUploadPic异常：" + model.shopid + ",Message:" + ex.Message + ",StackTrace:" + ex.StackTrace; _result.Message = ex.Message; _result.Data = new BossHelpUploadPicResponse() { message = ex.StackTrace.ToString() }; _result.Code = 0; return _result; } return _result; }
效果
