微信小程序实现图片上传功能怎么弄_怎样把图片发到小程序里

微信小程序实现图片上传功能怎么弄_怎样把图片发到小程序里前端:微信开发者工具后端:.Net服务器:阿里云这里介绍微信小程序如何实现上传图片到自己的服务器上前端代码data:{productInfo:{}},//上传图片uploadImage:function(){varthat=this;wx.chooseImage({count:1,//最多可以选择的图片总数…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

前端: 微信开发者工具

后端:.Net

服务器:阿里云

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

前端代码

data: {
  productInfo: {}
},
//上传图片
uploadImage: function () {
  var that = this;

  wx.chooseImage({
    count: 1,  //最多可以选择的图片总数
    sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths;
      //启动上传等待中...
      wx.showToast({
        title: '正在上传...',
        icon: 'loading',
        mask: true,
        duration: 10000
      })

        wx.uploadFile({
          url: '192.168.1.1/home/uploadfilenew',
          filePath: tempFilePaths[0],
          name: 'uploadfile_ant',
          formData: {
          },
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: function (res) {
            var data = JSON.parse(res.data);
            //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
            console.log(data);
          },
          fail: function (res) {
            wx.hideToast();
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          }
        });
    }
  });
}

Jetbrains全家桶1年46,售后保障稳定

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

[HttpPost]
public ContentResult UploadFileNew()
{
    UploadFileDTO model = new UploadFileDTO();
    HttpPostedFileBase file = Request.Files["uploadfile_ant"];
    if (file != null)
    {
        //公司编号+上传日期文件主目录
        model.Catalog = DateTime.Now.ToString("yyyyMMdd");

        //获取文件后缀
        string extensionName = System.IO.Path.GetExtension(file.FileName);

        //文件名
        model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;

        //保存文件路径
        string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
        if (!System.IO.Directory.Exists(filePathName))
        {
            System.IO.Directory.CreateDirectory(filePathName);
        }
        //相对路径
        string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
        file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));

        //获取临时文件相对完整路径
        model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
    }
    return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
/// <summary>
/// 上传文件 返回数据模型
/// </summary>
public class UploadFileDTO
{
    /// <summary>
    /// 目录名称
    /// </summary>
    public string Catalog { set; get; }
    /// <summary>
    /// 文件名称,包括扩展名
    /// </summary>
    public string FileName { set; get; }
    /// <summary>
    /// 浏览路径
    /// </summary>
    public string Url { set; get; }
    /// <summary>
    /// 上传的图片编号(提供给前端判断图片是否全部上传完)
    /// </summary>
    public int ImgIndex { get; set; }
}
#region 获取配置文件Key对应Value值
/// <summary>
/// 获取配置文件Key对应Value值
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
public static string GetConfigValue(string key)
{
    return ConfigurationManager.AppSettings[key].ToString();
}
#endregion

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

<appSettings>
  <!--图片临时文件夹 绝对路径-->
  <add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
  <!--图片正式文件夹 绝对路径-->
  <add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />

  <!--图片临时文件夹 相对路径-->
  <add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
  <!--图片正式文件夹 相对路径-->
  <add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
</appSettings>

PS:上传到服务器的临时文件夹内,当用户点击保存才把这些文件移动到正式目录下

小程序演示

微信小程序实现图片上传功能怎么弄_怎样把图片发到小程序里

自定义上传头像

 

微信小程序实现图片上传功能怎么弄_怎样把图片发到小程序里

不清楚的可以加微信联系我

微信小程序实现图片上传功能怎么弄_怎样把图片发到小程序里

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/203634.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • loadrunner使用教程之IP欺骗[通俗易懂]

    loadrunner使用教程之IP欺骗[通俗易懂]上次做压力测试的时候网站崩了,老大怀疑一点原因是说我用同一个IP施压2000个用户,服务器可能拒绝了些访问请求,这样不是很靠谱。今天有空就研究了下IP欺骗,模仿多个IP里发射用户,“这样可以在很大程度上模拟实际使用中多IP访问和并测试服务器均衡处理的能力”,嗯..第一步,录制脚本,不说了,反正也是自己看。简单录制了一个查询操作的脚本。第二步,把脚本放场景中来,脚本是脚本,场景是场景,一定要

    2022年10月10日
  • pfx证书获取私钥「建议收藏」

    pfx证书获取私钥「建议收藏」publicclassKeyUtil{publicKeyUtil(){}publicstaticPrivateKeygetPrivateKeyFromPFX(InputStreaminputStream,StringpfxFilePwd)throwsPKIException{PKCS12pkcs12=newP…

  • linux双系统默认进入win10,win10 linux 双系统 默认win10启动

    linux双系统默认进入win10,win10 linux 双系统 默认win10启动双系统怎么设置Win10系统为默认启动系统。Win10一出来,我就去安装尝试了,在自己电脑上安装了Win10双系统。安装后Win10就是默认启动系统了,那么要想让以前的系统为默认系统怎么设置呢,今天我就给大家介绍下Win10双系统怎么设置默认启动系统。1、在Win10系统下同时按下组合键“Win+R”,打开运行工具,输入“msconfig”,然后点击确定,如下图所示。2、在系统设置界面上点击“引导…

  • 显示隐藏高德地图点标注的文本标签「建议收藏」

    显示隐藏高德地图点标注的文本标签「建议收藏」@[显示隐藏高德地图点标注的文本标签]效果如图欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你…

  • python 数据合并函数merge( )[通俗易懂]

    python 数据合并函数merge( )[通俗易懂]python中的merge函数与sql中的join用法非常类似,以下是merge()函数中的参数:merge(left,right,how=’inner’,on=None,left_on=None,right_on=None,left_index=False,right_index=False,sort=False,suffixes=(‘_x’,’_y’),cop…

  • ipynb可以用pycharm_ipynb文件转换成py文件

    ipynb可以用pycharm_ipynb文件转换成py文件PyCharm中编写ipynb文件首先确认anaconda中安装了Jupyternotebook.如果是2019版,确保使用PyCharm专业版,CommunityEdition不包括Jupyter笔记本集成。另一种是在anaconda的cmd里面,输入jupyternotebook启动服务参考:PyCharm中编写ipynb文件…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号