微信小程序 上传图片

效果图  如上,js  如下,在页面循环图片就可以

  /**
   * 选择图片
   */
  uploadImgAdd: function(e) {
    var imgs = this.data.imgs;
    wx.chooseImage({
      sizeType: [‘original‘, ‘compressed‘],
      sourceType: [‘album‘, ‘camera‘],
      success: (res) => {
        for (let j in res.tempFilePaths){
          if (res.tempFilePaths[j].substring(res.tempFilePaths[j].length - 3)  == ‘gif‘){
            wx.showToast({
              title: ‘暂不能上传动图哦,换张图片试试吧~‘,
              icon: ‘none‘,
              duration: 2000,
              mask: true,
            })
            res.tempFilePaths.splice(j, 1)
          }
        }
        let tempFilePaths = this.data.tempFilePaths.concat(res.tempFilePaths);
        this.setData({
          tempFilePaths: tempFilePaths
        })
        let uploadimagsSrc = []
        for (var i = 0; i < tempFilePaths.length; i++) {   //转换为七牛地址
          if (imgs.length >= 9) {
            return false;
          } else {
            wx.uploadFile({
              url: app.data.urls + ‘images/Picture‘,
              filePath: tempFilePaths[i],
              header: {
                ‘content-type‘: ‘multipart/form-data‘
              },
              name: ‘file‘,
              success: res => {
                let data = res.data;
                console.log(res)
                uploadimagsSrc = [...uploadimagsSrc, data];
                this.setData({
                  uploadimagsSrc: uploadimagsSrc
                })
              },
              fail: (res) => {
                console.log(res)
                if (res.errMsg == "uploadFile:fail Broken pipe"){

                }
              }
            })
          }
        }
      },fail:(res)=>{
        console.log(res)
      }
    })
  },

  /**
   * 删除图片
   */
  uploadImgClose: function(e) {
    var imgs = this.data.tempFilePaths;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      tempFilePaths: imgs,
      uploadimagsSrc: imgs
    });
  },
/pulishComment/pulishComment
 

原文地址:https://www.cnblogs.com/zhenga/p/10361182.html

时间: 2024-11-10 22:15:34

微信小程序 上传图片的相关文章

微信小程序上传图片到COS腾讯云

功能需求:用户可以在评论中上传图片,图片保存到腾讯云COS上. 实现方法,微信小程序需要往后台传一个代表文件的参数file代表文件,借助MultipartFile获得文件的路径和文件名等信息. 关键实现代码: @RequestMapping(value = "/plugins/fileServer/fileservice/sales/admin", method = RequestMethod.POST) void postAdmin(@RequestParam(value = &qu

微信小程序上传图片到服务器实例

这一篇主要说头像 上传,以及修改保存的功能.本章节主要用的知识点有 1. wx.chooseImage 从本地相册选择图片或使用相机拍照. 2.wx.uploadFile 将本地资源上传到服务器. 3. 修改原来的小程序头像并保存,调用后台接口修改操作  第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject 我这里也贴出来了,不够

微信小程序上传图片(前端+PHP后端)

一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' /> 二.js文件 Page({ /** * 页面的初始数据 */ data: { //初始化为空 source

微信小程序上传图片单张

wxml代码 <view> <image src='{{source}}' bindtap="uploadimg" style='width:200rpx;height:200rpx;background:red;'>点击选择上传图</image> </view> js代码 var app = getApp() Page({ /** * 页面的初始数据 */ data: { //初始化为空 source: '' }, /** * 上传图片

微信小程序上传图片

话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph' src='{{photos}}' bindtap='touchphoto' mode='aspectFit'> </image> <!--循环显示选中的图片--> <block wx:for="{{pics}}" wx:for-index="

微信小程序 - 上传图片组件

使用了ES8的async/await,注意正确导入“regenerate.js”的路径,使用说明在components/up-img/index.js 点击下载:图片上传组件 原文地址:https://www.cnblogs.com/cisum/p/10199507.html

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the same task is working wx.uploadFile不能并行,因为wx.uploadFile是一个异步函数,所以循环的时候在安卓手机上会出现并行 解决的方法 做一个上传完的标识,然后 用递归算法进行上传 在上传成功的回调函数里面,直接递归,标识满足直接跳出,完成所有图片上传 贴上个

微信小程序多张图片上传

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',