微信小程序上传文件到自己的服务器

1、建立 WebApi项目
- （1）创建项目
- （2）发布项目
2、后端接口代码
3、小程序端调接口

1、建立 WebApi项目

（1）创建项目

选择菜单 “文件-》新建醒目-》web -》ASP.NET Web 应用程序”
输入项目名称和位置，确定，进入模板选择页面。

选择 WEB API 模板（选择Web API 时会添加对MVC 的支持）新建API控制器

Controllers ------》右键 ------》添加---------》控制器---------》webapi 2控制器 - 空

（2）发布项目

参考地址

2、后端接口代码

        /// <summary>/// 图片上传保存/// </summary>/// <returns></returns>[HttpPost]public IHttpActionResult PictureUpload() {try{var picturePath = "";const string fileTypes = "gif,jpg,jpeg,png,bmp";//运行上传的图片文件格式var content = Request.Content;//获取或设置 HTTP 消息的内容（当需要获取HTTP信息是会使用到）const string tempUploadFiles = "/UploadFile/"; //保存路径var newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/";var memoryStreamProvider = new MultipartMemoryStreamProvider();//获取图片文件流信息Task.Run(async () => await Request.Content.ReadAsMultipartAsync(memoryStreamProvider)).Wait();foreach (var item in memoryStreamProvider.Contents){if (item.Headers.ContentDisposition.FileName == null) continue;var filename = item.Headers.ContentDisposition.FileName.Replace("\"", "");var file = new FileInfo(filename);//upload fail（判断是否是运行上传的图片格式）if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1){return Json(new { code = 0, picturePath = "", msg = "不支持上传文件类型" });}//获取后缀var extension = Path.GetExtension(filename);var newFileName = Guid.NewGuid().ToString() + extension;//重命名if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath)){Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath);}var filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName);picturePath = Path.Combine(tempUploadFiles + newFilePath, newFileName);//图片相对路径var result = item.ReadAsStreamAsync().Result;using (var br = new BinaryReader(result)){var data = br.ReadBytes((int)result.Length);File.WriteAllBytes(filePath, data);//保存图片}}//save successfullyreturn Json(new { code = 1, picturePath = picturePath, msg = "图片上传成功~" });}catch (Exception ex){return Json(new { code = 0, msg = ex.Message });}}

3、小程序端调接口

wx.uploadFile({url: 'http://yangyoushan.top:83/api/Default/PictureUpload', //接口地址filePath: item.local,//本地地址name: 'file',formData: {'user': 'test'},success(res) {var data= JSON.parse(res.data)const url = 'http://yangyoushan.top:83' + data.picturePathlist[idx].url = url}})

参考文献wx.uploadFile

微信小程序上传文件到自己的服务器相关推荐

微信小程序上传文件400
微信小程序上传文件400 直接上示例问题代码将请求头添加上Host即可解决直接上示例问题代码 wx.uploadFile({url: 'https://' + domain + '/post/up ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传文件功能实现
在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信 ...
微信小程序上传文件详解
做微信小程序难免会遇到上传文件的问题.今天就给大家说一个简单的上传文件的例子吧 wxml代码 <button bindtap="upload">上传文件</but ...
微信小程序上传文件及图片（可以预览）
最近在写小程序项目,碰到了一个需求,需要用户可以上传各种类型的文件和图片,展示在页面上,并且点击还可以进行预览,就找了找微信小程序官网,写了一个例子,分享一下直接看代码: wxml: <vie ...
微信小程序上传文件（图片/word等）功能)
说到上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ }) 通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片: ...
微信小程序上传文件（可传 word、excel、ppt、视频、图片……）
文章目录前言示例代码前言近期做技术调研时发现微信官方支持文件上传了,这里记录一下官方 API:wx.chooseMessageFile(Object object) 交互:从微信聊天里选择文 ...
vue、微信小程序上传文件(base64格式、一般格式)及vue的表格导入和导出
一.上传文件 1.vue项目 base64格式 onInputChange(el) {var self = this;let file=el.file;let type=file.type.split ...

微信小程序上传文件到自己的服务器

微信小程序上传文件到自己的服务器

1、建立 WebApi项目

（1）创建项目

（2）发布项目

2、后端接口代码

3、小程序端调接口

微信小程序上传文件到自己的服务器相关推荐

最新文章

热门文章