微信小程序——上传图片

简介: 微信小程序——上传图片

以下是效果图片仅供参考

wxml

 <view class="imgbox">
    <view class="add">
      <image src="{{images}}" mode="aspectFill"></image>
    </view>
    <view class="button_comment">
      <image src="/image/jiahao.png" bindtap="chooseImage" />
    </view>
  </view>

 wxss

.imgbox{
  width: 100%;
  height: 130px;
  display: flex;
}
.add{
  width: 30%;
}
.add image{
  width: 90%;
  height: 110px;
}
.button_comment{
  width: 30%;
  height: 110px;
  text-align: center;
  background-color:#e0dede;
  margin-bottom: 20px;
  line-height: 150px;
}
.button_comment image{
  width: 40%;
  height: 50px;
}

js:

  chooseImage: function () {
    wx.chooseMedia({
      count: 2,
      mediaType: ['image', 'video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success: (res) => {
        console.log(res.tempFiles);
        let image = res.tempFiles[0].tempFilePath
        // console.log(image);
        this.setData({
          images: image
        })
        wx.uploadFile({
          url: getApp().globalData.url + '/science/upload',
          filePath: image,
          name: 'file',
          success: (res) => {
            var data = JSON.parse(res.data);
            // 发表评论图片
            this.data.thimg = data.front_file;
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 2000 //持续的时间
            })
          }
        })
      }
    })
  }
相关文章
|
10月前
|
小程序 JavaScript API
微信小程序上传图片
微信小程序上传图片
331 0
|
10月前
|
存储 小程序 前端开发
微信小程序上传图片
微信小程序上传图片
|
小程序 Java
微信小程序之JAVA后台上传图片,并且返回图片路径
微信小程序之JAVA后台上传图片,并且返回图片路径
497 0
微信小程序上传图片(附后端代码)
几乎每个程序都需要用到图片。 在小程序中我们可以通过image组件显示图片。 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚。 上传图片 首先选择图片 通过wx.chooseImage(OBJECT)实现 官方示例代码 wx.chooseImage({ count: 1, // 默认9 sizeType: ['origina
5335 0
|
16小时前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
16小时前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
16小时前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
16小时前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
16小时前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
11 1
|
16小时前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)

热门文章

最新文章

相关实验场景

更多