• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序--实现图片上传

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前端: 微信开发者工具

后端:.Net

服务器:阿里云

这里介绍微信小程序如何实现上传图片到自己的服务器上

前端代码

 1 data: {
 2   productInfo: {}
 3 },
 4 //添加Banner
 5 bindChooiceProduct: function () {
 6   var that = this;
 7 
 8   wx.chooseImage({
 9     count: 3,  //最多可以选择的图片总数
10     sizeType: [\'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
11     sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
12     success: function (res) {
13       // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
14       var tempFilePaths = res.tempFilePaths;
15       //启动上传等待中...
16       wx.showToast({
17         title: \'正在上传...\',
18         icon: \'loading\',
19         mask: true,
20         duration: 10000
21       })
22       var uploadImgCount = 0;
23       for (var i = 0, h = tempFilePaths.length; i < h; i++) {
24         wx.uploadFile({
25           url: util.getClientSetting().domainName + \'/home/uploadfilenew\',
26           filePath: tempFilePaths[i],
27           name: \'uploadfile_ant\',
28           formData: {
29             \'imgIndex\': i
30           },
31           header: {
32             "Content-Type": "multipart/form-data"
33           },
34           success: function (res) {
35             uploadImgCount++;
36             var data = JSON.parse(res.data);
37             //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
38             var productInfo = that.data.productInfo;
39             if (productInfo.bannerInfo == null) {
40               productInfo.bannerInfo = [];
41             }
42             productInfo.bannerInfo.push({
43               "catalog": data.Catalog,
44               "fileName": data.FileName,
45               "url": data.Url
46             });
47             that.setData({
48               productInfo: productInfo
49             });
50 
51             //如果是最后一张,则隐藏等待中
52             if (uploadImgCount == tempFilePaths.length) {
53               wx.hideToast();
54             }
55           },
56           fail: function (res) {
57             wx.hideToast();
58             wx.showModal({
59               title: \'错误提示\',
60               content: \'上传图片失败\',
61               showCancel: false,
62               success: function (res) { }
63             })
64           }
65         });
66       }
67     }
68   });
69 }

后端上传代码(将文件上传到服务器临时文件夹内)

 1 [HttpPost]
 2 public ContentResult UploadFileNew()
 3 {
 4     UploadFileDTO model = new UploadFileDTO();
 5     HttpPostedFileBase file = Request.Files["uploadfile_ant"];
 6     if (file != null)
 7     {
 8         //公司编号+上传日期文件主目录
 9         model.Catalog = DateTime.Now.ToString("yyyyMMdd");
10         model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);
11 
12         //获取文件后缀
13         string extensionName = System.IO.Path.GetExtension(file.FileName);
14 
15         //文件名
16         model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;
17 
18         //保存文件路径
19         string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
20         if (!System.IO.Directory.Exists(filePathName))
21         {
22             System.IO.Directory.CreateDirectory(filePathName);
23         }
24         //相对路径
25         string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
26         file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));
27 
28         //获取临时文件相对完整路径
29         model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
30     }
31     return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
32 }
 1 /// <summary>
 2 /// 上传文件 返回数据模型
 3 /// </summary>
 4 public class UploadFileDTO
 5 {
 6     /// <summary>
 7     /// 目录名称
 8     /// </summary>
 9     public string Catalog { set; get; }
10     /// <summary>
11     /// 文件名称,包括扩展名
12     /// </summary>
13     public string FileName { set; get; }
14     /// <summary>
15     /// 浏览路径
16     /// </summary>
17     public string Url { set; get; }
18     /// <summary>
19     /// 上传的图片编号(提供给前端判断图片是否全部上传完)
20     /// </summary>
21     public int ImgIndex { get; set; }
22 }
 1 #region 获取配置文件Key对应Value值
 2 /// <summary>
 3 /// 获取配置文件Key对应Value值
 4 /// </summary>
 5 /// <param name="key"></param>
 6 /// <returns></returns>
 7 public static string GetConfigValue(string key)
 8 {
 9     return ConfigurationManager.AppSettings[key].ToString();
10 }
11 #endregion

设置配置文件上传文件对应的文件夹信息

 1 <appSettings>
 2   <!--图片临时文件夹 绝对路径-->
 3   <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
 4   <!--图片正式文件夹 绝对路径-->
 5   <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />
 6 
 7   <!--图片临时文件夹 相对路径-->
 8   <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
 9   <!--图片正式文件夹 相对路径-->
10   <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
11 </appSettings>

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap