前端(.wxml)

<view id="view1">
<view id="btns">
<image id="ima1" mode="aspectFitf" src="{{src}}"></image>
<button type="primary" bindtap="btntakephoto">拍摄照片</button>
<button type="primary" bindtap="btnchoosephoto">选择照片</button>
<button type="primary" bindtap="btnupload">上传</button>
</view>
</view>

样式(wxss)

button{
margin: 8rpx;
padding: 0rpx;
font-size: 30rpx;
width: 200rpx;
float: left;
}
#view1
{
width: %;
height: %;
}
#btns
{
margin: 50rpx;
padding: 0rpx;
}
image{
width: 650rpx;
height: 1050rpx;
background-color: lavender;
}

js(.js)

Page({
data: {
filepath:"",
},
onLoad: function (options) {
this.ctx = wx.createCameraContext()
},
//拍摄照片
btntakephoto: function () {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath,
filepath: res.tempImagePath[],
})
}
})
},
//选择照片
btnchoosephoto: function() {
wx.chooseImage({
count: , // 默认9
sizeType: ['original'],
sourceType: ['camera'],
success:(res) => {
this.setData({
src: res.tempFilePaths[],
filepath: res.tempFilePaths[],
});
}
})
},
//上传图片
btnupload: function () {
if (this.data.filepath == "")
{
wx.showToast({
title: '没有选择图片',
icon: 'none',
duration:
})
}
else
{
wx.uploadFile({
url: 'http://localhost:9965/api/image/WxPostFile',
filePath: this.data.filepath,
name: 'file',
formData: {
filename: ''
},
success(res) {
console.log(res);
wx.showToast({
title: "上传成功",
icon: 'success',
duration:
})
}
})
}
}
})

json配置(.json)

{
"navigationBarTitleText": "上传图片",
"navigationBarBackgroundColor": "#003a9b",
"navigationBarTextStyle": "white"
}

后台c#

 #region 测试微信小程序图片上传
[HttpPost]
public HttpResponseMessage WxPostFile()
{
bool isSuccess = false;
try
{
HttpPostedFile file = HttpContext.Current.Request.Files[];
var filename = HttpContext.Current.Request["filename"];
string path = AppDomain.CurrentDomain.BaseDirectory + "Out";
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
//var mapPath = HttpContext.Current.Server.MapPath(path); //硬盘物理目录
var fileExt = Path.GetExtension(file.FileName);//文件后缀名(.png)
var mapPathFullPath = path + "\\" + filename + fileExt; //硬盘物理路径
file.SaveAs(mapPathFullPath);
isSuccess = true;
}
catch (Exception ex)
{
isSuccess = false;
}
var resultObj = JsonConvert.SerializeObject(isSuccess);
HttpResponseMessage result = new HttpResponseMessage
{
Content = new StringContent(resultObj, Encoding.GetEncoding("UTF-8"), "application/json")
};
return result;
}
#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. 打印li索引值

    <ul> <li>这是第一条alert(0)</li> <li>这是第二条alert(1)</li> <li>这是第三条aler ...

  2. LeetCode 221. 最大正方形(Maximal Square)

    题目描述 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: ...

  3. Go语言中new和make的区别

    Go语言中new跟make是内置函数,主要用来创建分配类型内存. new( ) new(T)创建一个没有任何数据的类型为T的实例,并返回该实例的指针: 源码解析 func new func new(T ...

  4. Nginx命令与配置详解

    1. 控制命令 ./sbin/nginx –t 测试配置是否正确 ./sbin/nginx –s reload 加载最新配置,进程并不重启  ./sbin/nginx –s stop  立即停止   ...

  5. Android 关于 CountDownTimer onTick() 倒计时不准确问题源码分析

    一.问题 CountDownTimer 使用比较简单,设置 5 秒的倒计时,间隔为 1 秒. final String TAG = "CountDownTimer"; * , ) ...

  6. Mac OS为UltraEdit在Terminal中添加快捷使用命令

    一,什么是UltraEdit 我觉得是个程序员,撸代码的都知道UrlEdit是什么.我们在会使用Linux,在Linux中有个很出名的编辑器gedit,使得我们在终端中输入gedit xxx.便可进入 ...

  7. debian上搭建私有docker仓库

    docker官方仓库是docker hub.虽然很好用,但是无法满足私密性的要求. 如果只需要在局域网内或者朋友圈内分享各自制作的image,那么,搭建属于自己的docker仓库变得很有必要. 一.环 ...

  8. SEO中常用的301永久重定向代码大全

    301是永久重定向的意思,表示请求的网页已永久移动到新位置,服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置.其实301重定向在SEO中被广泛应用,也是被广泛认为比 ...

  9. Android View重绘和更新: invalidate和requestLayout 总结的不错 赶紧复制。。哈哈

    总述:View有两个很重要的方法:invalidate和requestLayout,常用于View重绘和更新. Invalidate:To farce a view to draw,call inva ...

  10. AES 加密算法的原理详解

    AES 加密算法的原理详解 本教程摘选自 https://blog.csdn.net/qq_28205153/article/details/55798628 的原理部分. AES简介 高级加密标准( ...