前端(.wxml)

  1. <view id="view1">
  2. <view id="btns">
  3. <image id="ima1" mode="aspectFitf" src="{{src}}"></image>
  4. <button type="primary" bindtap="btntakephoto">拍摄照片</button>
  5. <button type="primary" bindtap="btnchoosephoto">选择照片</button>
  6. <button type="primary" bindtap="btnupload">上传</button>
  7. </view>
  8. </view>

样式(wxss)

  1. button{
  2. margin: 8rpx;
  3. padding: 0rpx;
  4. font-size: 30rpx;
  5. width: 200rpx;
  6. float: left;
  7. }
  8. #view1
  9. {
  10. width: %;
  11. height: %;
  12. }
  13. #btns
  14. {
  15. margin: 50rpx;
  16. padding: 0rpx;
  17. }
  18. image{
  19. width: 650rpx;
  20. height: 1050rpx;
  21. background-color: lavender;
  22. }

js(.js)

  1. Page({
  2. data: {
  3. filepath:"",
  4. },
  5. onLoad: function (options) {
  6. this.ctx = wx.createCameraContext()
  7. },
  8. //拍摄照片
  9. btntakephoto: function () {
  10. this.ctx.takePhoto({
  11. quality: 'high',
  12. success: (res) => {
  13. this.setData({
  14. src: res.tempImagePath,
  15. filepath: res.tempImagePath[],
  16. })
  17. }
  18. })
  19. },
  20. //选择照片
  21. btnchoosephoto: function() {
  22. wx.chooseImage({
  23. count: , // 默认9
  24. sizeType: ['original'],
  25. sourceType: ['camera'],
  26. success:(res) => {
  27. this.setData({
  28. src: res.tempFilePaths[],
  29. filepath: res.tempFilePaths[],
  30. });
  31. }
  32. })
  33. },
  34. //上传图片
  35. btnupload: function () {
  36. if (this.data.filepath == "")
  37. {
  38. wx.showToast({
  39. title: '没有选择图片',
  40. icon: 'none',
  41. duration:
  42. })
  43. }
  44. else
  45. {
  46. wx.uploadFile({
  47. url: 'http://localhost:9965/api/image/WxPostFile',
  48. filePath: this.data.filepath,
  49. name: 'file',
  50. formData: {
  51. filename: ''
  52. },
  53. success(res) {
  54. console.log(res);
  55. wx.showToast({
  56. title: "上传成功",
  57. icon: 'success',
  58. duration:
  59. })
  60. }
  61. })
  62. }
  63. }
  64. })

json配置(.json)

  1. {
  2. "navigationBarTitleText": "上传图片",
  3. "navigationBarBackgroundColor": "#003a9b",
  4. "navigationBarTextStyle": "white"
  5. }

后台c#

  1. #region 测试微信小程序图片上传
  2. [HttpPost]
  3. public HttpResponseMessage WxPostFile()
  4. {
  5. bool isSuccess = false;
  6. try
  7. {
  8. HttpPostedFile file = HttpContext.Current.Request.Files[];
  9. var filename = HttpContext.Current.Request["filename"];
  10. string path = AppDomain.CurrentDomain.BaseDirectory + "Out";
  11. if (!Directory.Exists(path))
  12. Directory.CreateDirectory(path);
  13. //var mapPath = HttpContext.Current.Server.MapPath(path); //硬盘物理目录
  14. var fileExt = Path.GetExtension(file.FileName);//文件后缀名(.png)
  15. var mapPathFullPath = path + "\\" + filename + fileExt; //硬盘物理路径
  16. file.SaveAs(mapPathFullPath);
  17. isSuccess = true;
  18. }
  19. catch (Exception ex)
  20. {
  21. isSuccess = false;
  22. }
  23. var resultObj = JsonConvert.SerializeObject(isSuccess);
  24. HttpResponseMessage result = new HttpResponseMessage
  25. {
  26. Content = new StringContent(resultObj, Encoding.GetEncoding("UTF-8"), "application/json")
  27. };
  28. return result;
  29. }
  30. #endregion

本地测试

微信小程序上传图片及本地测试的更多相关文章

  1. H5本地存储技术和微信小程序中的本地存储

    1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 微信小程序 上传图片并等比列压缩到指定大小

    微信小程序官方API中  wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程 ...

  3. 微信小程序环境搭建(本地,测试,生产)

    1.本地 官网文档链接:https://cloud.tencent.com/document/product/619/11442#.E6.9C.AC.E5.9C.B0.E5.A6.82.E4.BD.9 ...

  4. 微信小程序如何进行本地调试

    1.下载并使用微信开发者工具 2.将项目导入工具 3.在项目中修改请求http地址 4.在工具上点击“测试号”,跳转到测试号管理界面设置request合法域名. 注意这里输入的测试域名要和上一步相同. ...

  5. 微信小程序上传图片(附后端代码)

    几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...

  6. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  7. 微信小程序加载本地图片方法

    目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具 打开项目 步骤二:新建个文件夹(放项目的一 ...

  8. (十)微信小程序---上传图片chooseImage

    官方文档 示例一 wxml <view bindtap="uploadImage">请上传图片</view> <image wx:for=" ...

  9. 微信小程序上传图片(前端+PHP后端)

    一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...

随机推荐

  1. 20182303 2019-2020-1 《数据结构与面向对象程序设计》第2&3周学习总结

    目录 教材学习内容总结 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错题总结 结对及互评 点评 学习进度条 教材学习内容总结 教材第二章内容 学习Java基本数据类型以及 ...

  2. Flutter移动电商实战 --(13)ADBanner组件的编写

    1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片 class AdBanner extends Sta ...

  3. dubbo异常filter

    dubbo请求调用过程分析 https://blog.csdn.net/javahongxi/article/details/72876694 浅谈dubbo的ExceptionFilter异常处理  ...

  4. 008-ICMP协议(网络控制文协议)

    一.概述 ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议簇的一个子协议,用于在IP主机.路由器之间传递控制消息.控制 ...

  5. "挡位"还是"档位",究竟谁错了

    http://baijiahao.baidu.com/s?id=1581395663965196858&wfr=spider&for=pc 对于“挡”与“档”两个字,我一直并没有给以太 ...

  6. vue build后 less sass background-img找不到文件

    修改build下面的utils.js配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicP ...

  7. 在HbuilderX的Uni-app中引入crypto-js md5

    在 hbuilderX的菜单“视图”中选择“显示终端”,在终端中把当前目录定位到uni-app的根目录,这样才可以把crypto-js库安装在正确的位置,在终端中键入:npm install cryp ...

  8. Visual Studio Code的设置及插件同步

    Visual Studio Code的设置及插件同步 使用Visual Studio Code开发有一段时间了,用起来是极其的顺手,但是唯独一点不爽的就是,Visual Studio Code不像Vi ...

  9. linux 中的命令是什么?执行命令的几种方式?如何自己创建命令?

    linux 中的命令是什么? 命令是可执行的二进制程序 执行命令的几种方式? ./test.sh                     #相对路径执行 /data/test.sh           ...

  10. 【VS开发】ConvertBSTRToString(filename) 不能将string转换为BSTR

    环境:win7,x64,vs2008 sp1 把VC 6.0的工程文件用VS2008打开,编译报错: error C2664:"_com_util::ConvertBSTRToString& ...