微信图片上传_微信上传图片损坏 - CSDN
精华内容
参与话题
  • 考虑到日常项目会用到,就整理了一下这案例,可以上传指定数量的图片或视频; wxml: <view class='the-tit'>上传图片:</view> <view class='share-pics'> <view class='slug-cons'> <...

    考虑到日常项目中还是比较常用的,就整理了一下这案例,可以上传指定数量的图片或视频;
    使用可以查看小程序文档:
    选择图片: wx.chooseImage
    选择视频:wx.chooseVideo

    在这里插入图片描述在这里插入图片描述

    wxml:

    <view class='the-tit'>上传图片:</view>
    <view class='share-pics'>
      <view class='slug-cons'>
        <view class='pics'>
          <view class='tp' wx:for="{{upImgArr}}" wx:key="item">
              <image mode='aspectFill' class='img' src='{{item.path}}' data-presrc="{{item.path}}" bindtap='previewImg' />
              <view class='delbtn' data-index="{{index}}" data-type="image" bindtap='delFile'>X</view>
          </view>
        </view>
        <view class='btn' wx:if="{{upFilesBtn}}"  data-type="image" bindtap='uploadFiles'></view>
      </view>
    </view>
    

    js:

    // pages/uploadPic/uploadPic.js
    const app = getApp();
    var util = require('../../utils/util.js');
    var upFiles = require('../../utils/upFiles.js');
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        upImgArr: [], //存图片
        upFilesBtn: true,
        maxUploadLen: 9,  //限制上传数量
      },
    
      // 选择图片或者视频
      uploadFiles(e) {
        var that = this,
          type = e.currentTarget.dataset.type,
          maxUploadLen = that.data.maxUploadLen;
        if (type == 'image') {
          upFiles.chooseImage(that, maxUploadLen);
        } else if (type == 'video') {
          upFiles.chooseVideo(that, maxUploadLen);
        }
      },
    
      // 删除上传图片 或者视频
      delFile(e) {
        let that = this;
        wx.showModal({
          title: '温馨提示',
          content: '您确认要删除这张图片吗?',
          success(res) {
            if (res.confirm) {
              let delNum = e.currentTarget.dataset.index,
                delType = e.currentTarget.dataset.type,
                upImgArr = that.data.upImgArr,
                upVideoArr = that.data.upVideoArr;
              if (delType == 'image') {
                upImgArr.splice(delNum, 1)
                that.setData({
                  upImgArr: upImgArr
                })
              } else if (delType == 'video') {
                upVideoArr.splice(delNum, 1)
                that.setData({
                  upVideoArr: upVideoArr
                })
              }
    
              let upFilesArr = upFiles.getPathArr(that);
              if (upFilesArr.length < that.data.maxUploadLen) {
                that.setData({
                  upFilesBtn: true,
                })
              }
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
    
      // 预览图片
      previewImg(e) {
        let that = this,
          imgsrc = e.currentTarget.dataset.presrc,
          arr = that.data.upImgArr,
          preArr = [];
        arr.map(function (v, i) {
          preArr.push(v.path)
        })
        //console.log(preArr)
        wx.previewImage({
          current: imgsrc,
          urls: preArr
        })
      },
    })
    

    完整案例可访问https://github.com/xiexikang/xcx-uploadPic-Vid

    展开全文
  • 微信图片上传和下载最近在研究微信图片上传和下载,查看了很多资料,和自己的摸索,将其总结一下。一。上传二。下载package com.cxb.wx.media;/** * 微信通用接口凭证 * * @author Engineer-Jsp * @date ...
    微信的图片上传和下载


    最近在研究微信的图片上传和下载,查看了很多资料,和自己的摸索,将其总结一下。

    一。上传


    二。下载



    package com.cxb.wx.media;


    /** 
     * 微信通用接口凭证 
     *  
     * @author Engineer-Jsp 
     * @date 2014.06.23 
     */  
    public class AccessToken {  
        // 获取到的凭证  
        private String token;  
        // 凭证有效时间,单位:秒  
        private int expiresIn;  
      
        public String getToken() {  
            return token;  
        }  
      
        public void setToken(String token) {  
            this.token = token;  
        }  
      
        public int getExpiresIn() {  
            return expiresIn;  
        }  
      
        public void setExpiresIn(int expiresIn) {  
            this.expiresIn = expiresIn;  
        }  

    }  



    package com.cxb.wx.media;


    /**
     * @author ChenXb
     *
     * 2018年4月27日
     */
    public class WeixinMedia {
    //媒体文件类型
    private String type;
    //媒体文件标识或缩略图的媒体文件标识
    private String mediaId;
    //媒体文件上传的时间
    private int createdAt;
    public String getType() {
    return type;
    }
    public void setType(String type) {
    this.type = type;
    }
    public String getMediaId() {
    return mediaId;
    }
    public void setMediaId(String mediaId) {
    this.mediaId = mediaId;
    }
    public int getCreatedAt() {
    return createdAt;
    }
    public void setCreatedAt(int createdAt) {
    this.createdAt = createdAt;
    }
    @Override
    public String toString() {
    return "WxMedia [type=" + type + ", mediaId=" + mediaId + ", createdAt=" + createdAt + "]";
    }

    }





    package com.cxb.wx.media;


    /**
     * @author Engineer-Jsp
     * @date 2014.10.09
     * 请求数据通用类*/
    import java.io.BufferedReader;
    import java.io.InputStream;
    import java.io.InputStreamReader;
    import java.io.OutputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;


    import com.cxb.wx.menu.Menu;


    import net.sf.json.JSONObject;
    public class WeixinUtil {
        /** 
         * 发起https请求并获取结果 
         *  
         * @param requestUrl 请求地址 
         * @param requestMethod 请求方式(GET、POST) 
         * @param outputStr 提交的数据 
         * @return JSONObject(通过JSONObject.get(key)的方式获取json对象的属性值) 
         */  
    public static JSONObject HttpRequest(String request , String RequestMethod , String output ){
    JSONObject jsonObject = null;
    StringBuffer buffer = new StringBuffer();
    try {
    //建立连接
    URL url = new URL(request);
    HttpURLConnection connection = (HttpURLConnection) url.openConnection();
    connection.setDoOutput(true);
    connection.setDoInput(true);
    connection.setUseCaches(false);
    connection.setRequestMethod(RequestMethod);
    if(output!=null){
    OutputStream out = connection.getOutputStream();
    out.write(output.getBytes("UTF-8"));
    out.close();
    }
    //流处理
    InputStream input = connection.getInputStream();
    InputStreamReader inputReader = new InputStreamReader(input,"UTF-8");
    BufferedReader reader = new BufferedReader(inputReader);
    String line;
    while((line=reader.readLine())!=null){
    buffer.append(line);
    }
    //关闭连接、释放资源
    reader.close();
    inputReader.close();
    input.close();
    input = null;
    connection.disconnect();
    jsonObject = JSONObject.fromObject(buffer.toString());
    } catch (Exception e) {
    }
    return jsonObject;

    // 获取access_token的接口地址(GET)   
    public final static String access_token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";  
      
    /** 
    * 获取access_token 
    *  
    * @param CorpID 企业Id 
    * @param SECRET 管理组的凭证密钥,每个secret代表了对应用、通讯录、接口的不同权限;不同的管理组拥有不同的secret 
    * @return 
    */  
    public static AccessToken getAccessToken(String corpID, String secret) {  
        AccessToken accessToken = null;  
      
        String requestUrl = access_token_url.replace("APPID", corpID).replace("APPSECRET", secret);  
        JSONObject jsonObject = HttpRequest(requestUrl, "GET", null);  
        // 如果请求成功  
        if (null != jsonObject) {  
            try {  
                accessToken = new AccessToken();  
                accessToken.setToken(jsonObject.getString("access_token"));  
                accessToken.setExpiresIn(jsonObject.getInt("expires_in"));
                System.out.println("获取token成功:"+jsonObject.getString("access_token")+"————"+jsonObject.getInt("expires_in"));
            } catch (Exception e) {  
                accessToken = null;  
                // 获取token失败  
                String error = String.format("获取token失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));  
                System.out.println(error);
            }  
        }  
        return accessToken;  
    }
    // 菜单创建(POST)   
    public static String menu_create_url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN";  
      
    /** 
    * 创建菜单 
    *  
    * @param menu 菜单实例 
    * @param accessToken 有效的access_token 
    * @param agentid  企业应用的id,整型,可在应用的设置页面查看
    * @return 0表示成功,其他值表示失败 
    */  
    public static int createMenu(Menu menu, String accessToken) {  
        int result = 0;  
      
        // 拼装创建菜单的url  
        String url = menu_create_url.replace("ACCESS_TOKEN", accessToken);  
        // 将菜单对象转换成json字符串  
        String jsonMenu = JSONObject.fromObject(menu).toString();  
        // 调用接口创建菜单  
        JSONObject jsonObject = HttpRequest(url, "POST", jsonMenu);  
      
        if (null != jsonObject) {  
            if (0 != jsonObject.getInt("errcode")) {  
                result = jsonObject.getInt("errcode");  
                String error = String.format("创建菜单失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));  
                System.out.println(error); 
            }  
        }  
      
        return result;  
    }  
    public static String URLEncoder(String str){
    String result = str ;
    try {
    result = java.net.URLEncoder.encode(result,"UTF-8");
    } catch (Exception e) {
            e.printStackTrace();
    }
    return result;
    }
    /**
    * 根据内容类型判断文件扩展名

    * @param contentType 内容类型
    * @return
    */
    public static String getFileEndWitsh(String contentType) {
    String fileEndWitsh = "";
    if ("image/jpeg".equals(contentType))
    fileEndWitsh = ".jpg";
    else if ("audio/mpeg".equals(contentType))
    fileEndWitsh = ".mp3";
    else if ("audio/amr".equals(contentType))
    fileEndWitsh = ".amr";
    else if ("video/mp4".equals(contentType))
    fileEndWitsh = ".mp4";
    else if ("video/mpeg4".equals(contentType))
    fileEndWitsh = ".mp4";
    return fileEndWitsh;
    }
    /**
    * 数据提交与请求通用方法
    * @param access_token 凭证
    * @param RequestMt 请求方式
    * @param RequestURL 请求地址
    * @param outstr 提交json数据
    * */
        public static int PostMessage(String access_token ,String RequestMt , String RequestURL , String outstr){
        int result = 0;
        RequestURL = RequestURL.replace("ACCESS_TOKEN", access_token);
        JSONObject jsonobject = WeixinUtil.HttpRequest(RequestURL, RequestMt, outstr);
        if (null != jsonobject) {  
              if (0 != jsonobject.getInt("errcode")) {  
                  result = jsonobject.getInt("errcode");  
                  String error = String.format("操作失败 errcode:{} errmsg:{}", jsonobject.getInt("errcode"), jsonobject.getString("errmsg"));  
                  System.out.println(error); 
              }  
          }
        return result;
        }
    }  






    package com.cxb.wx.media;


    import java.io.BufferedInputStream;
    import java.io.BufferedReader;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.InputStream;
    import java.io.InputStreamReader;
    import java.io.OutputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;


    import com.cxb.wx.accesstoken.AccessTokenUtil;
    import com.cxb.wx.accesstoken.Account;


    import net.sf.json.JSONObject;


    /**
     * @author ChenXb
     *
     * 2018年4月27日
     */
    public class MUDload {


    /**
    * 上传媒体文件
    * @param accessToken 接口访问凭证
    * @param type 媒体文件类型,分别有图片(image)、语音(voice)、视频(video),普通文件(file)
    * @param media form-data中媒体文件标识,有filename、filelength、content-type等信息
    * @param mediaFileUrl 媒体文件的url
    * 上传的媒体文件限制
         * 图片(image):1MB,支持JPG格式
         * 语音(voice):2MB,播放长度不超过60s,支持AMR格式
         * 视频(video):10MB,支持MP4格式
         * 普通文件(file):10MB
    * */
    public static WeixinMedia uploadMedia(String accessToken, String type, String mediaFileUrl) {
    WeixinMedia weixinMedia = null;
    // 拼装请求地址
    String uploadMediaUrl = "https://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE";
    uploadMediaUrl = uploadMediaUrl.replace("ACCESS_TOKEN", accessToken).replace("TYPE", type);


    // 定义数据分隔符
    String boundary = "------------7da2e536604c8";
    try {
    URL uploadUrl = new URL(uploadMediaUrl);
    HttpURLConnection uploadConn = (HttpURLConnection) uploadUrl.openConnection();
    uploadConn.setDoOutput(true);
    uploadConn.setDoInput(true);
    uploadConn.setRequestMethod("POST");
    // 设置请求头Content-Type
    uploadConn.setRequestProperty("Content-Type", "multipart/form-data;boundary=" + boundary);
    // 获取媒体文件上传的输出流(往微信服务器写数据)
    OutputStream outputStream = uploadConn.getOutputStream();


    URL mediaUrl = new URL(mediaFileUrl);
    HttpURLConnection meidaConn = (HttpURLConnection) mediaUrl.openConnection();
    meidaConn.setDoOutput(true);
    meidaConn.setRequestMethod("GET");


    // 从请求头中获取内容类型
    String contentType = meidaConn.getHeaderField("Content-Type");
    // 根据内容类型判断文件扩展名
    String fileExt = WeixinUtil.getFileEndWitsh(contentType);
    // 请求体开始
    outputStream.write(("--" + boundary + "\r\n").getBytes());
    outputStream.write(String.format("Content-Disposition: form-data; name=\"media\"; filename=\"file1%s\"\r\n", fileExt).getBytes());
    outputStream.write(String.format("Content-Type: %s\r\n\r\n", contentType).getBytes());


    // 获取媒体文件的输入流(读取文件)
    BufferedInputStream bis = new BufferedInputStream(meidaConn.getInputStream());
    byte[] buf = new byte[8096];
    int size = 0;
    while ((size = bis.read(buf)) != -1) {
    // 将媒体文件写到输出流(往微信服务器写数据)
    outputStream.write(buf, 0, size);
    }
    // 请求体结束
    outputStream.write(("\r\n--" + boundary + "--\r\n").getBytes());
    outputStream.close();
    bis.close();
    meidaConn.disconnect();


    // 获取媒体文件上传的输入流(从微信服务器读数据)
    InputStream inputStream = uploadConn.getInputStream();
    InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
    BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
    StringBuffer buffer = new StringBuffer();
    String str = null;
    while ((str = bufferedReader.readLine()) != null) {
    buffer.append(str);
    }
    bufferedReader.close();
    inputStreamReader.close();
    // 释放资源
    inputStream.close();
    inputStream = null;
    uploadConn.disconnect();


    // 使用JSON-lib解析返回结果
    JSONObject jsonObject = JSONObject.fromObject(buffer.toString());
    weixinMedia = new WeixinMedia();
    weixinMedia.setType(jsonObject.getString("type"));
    // type等于 缩略图(thumb) 时的返回结果和其它类型不一样
    if ("thumb".equals(type))
    weixinMedia.setMediaId(jsonObject.getString("thumb_media_id"));
    else{
    weixinMedia.setMediaId(jsonObject.getString("media_id"));
        weixinMedia.setCreatedAt(jsonObject.getInt("created_at"));
    }
    } catch (Exception e) {
    weixinMedia = null;
    String error = String.format("上传媒体文件失败:%s", e);
    System.out.println(error);
    }
    return weixinMedia;
    }

    /**
    * 获取媒体文件
    * @param accessToken 接口访问凭证
    * @param media_id 媒体文件id
    * @param savePath 文件在服务器上的存储路径
    * */
    public static String downloadMedia(String accessToken, String mediaId, String savePath) {
    String filePath = null;
    // 拼接请求地址
    String requestUrl = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
    requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);
    System.out.println(requestUrl);
    try {
    URL url = new URL(requestUrl);
    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
    conn.setDoInput(true);
    conn.setRequestMethod("GET");


    if (!savePath.endsWith("/")) {
    savePath += "/";
    }
    // 根据内容类型获取扩展名
    String fileExt = WeixinUtil.getFileEndWitsh(conn.getHeaderField("Content-Type"));
    // 将mediaId作为文件名
    filePath = savePath + mediaId + fileExt;


    BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
    FileOutputStream fos = new FileOutputStream(new File(filePath));
    byte[] buf = new byte[8096];
    int size = 0;
    while ((size = bis.read(buf)) != -1){
    fos.write(buf, 0, size);
    }
    fos.close();
    bis.close();


    conn.disconnect();
    String info = String.format("下载媒体文件成功,filePath=" + filePath);
    System.out.println(info);
    } catch (Exception e) {
    filePath = null;
    String error = String.format("下载媒体文件失败:%s", e);
    System.out.println(error);
    }
    return filePath;
    }

    /**
    * 演示实例
    */

    public static void main(String[] args) {

                    //这里获取accessToken 可以参考我的获取accessToken 博客完成。

    String accessToken = AccessTokenUtil.getAccessToken(Account.APPID, Account.APPSECRET);
    //上传           这里模拟的是将图片放在Tomcat里面  http://localhost:8080/a.jpg 这里是Tomcat能访问的图片即可
    WeixinMedia wxMedia = uploadMedia(accessToken, "image", "http://localhost:8080/a.jpg");
    System.out.println(wxMedia.toString());

    //下载
    String mediaId = wxMedia.getMediaId();
    String file = downloadMedia(accessToken, mediaId, "F:/CSDN");
    System.out.println(file);
    }
    }


    执行效果:



    需要的jar



    展开全文
  • 微信小程序多张图片上传

    万次阅读 2018-11-19 10:32:34
    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数。 首先,我们来看一看wx....

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?

    这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数。

    首先,我们来看一看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', //仅为示例,非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData:{
            'user': 'test'
          },
          success: function(res){
            var data = res.data
            //do something
          }
        })
      }
    })

    复制代码

    这里的示例代码,是选择图片,然后上传选中的图片中的第一个图片;

     

    现在开始写多张图片上传的例子

    首先,我们还是要选择图片

     

    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址,是一个数组
        
      }
    })

    然后在app.js中写一个多张图片上传的方法,后面引入,你也可以写在一个JS文件中,后面引入:

    复制代码

        //多张图片上传
        function uploadimg(data){
         var that=this,
             i=data.i?data.i:0,//当前上传的哪张图片
             success=data.success?data.success:0,//上传成功的个数
             fail=data.fail?data.fail:0;//上传失败的个数
          wx.uploadFile({
                url: data.url, 
                filePath: data.path[i],
                name: 'file',//这里根据自己的实际情况改
                formData:null,//这里是上传图片时一起上传的数据
                success: (resp) => {
                   success++;//图片上传成功,图片上传成功的变量+1
                   console.log(resp)
                    console.log(i);
                    //这里可能有BUG,失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
                },
                fail: (res) => {
                    fail++;//图片上传失败,图片上传失败的变量+1
                    console.log('fail:'+i+"fail:"+fail);
                },
                complete: () => {
                    console.log(i);
                    i++;//这个图片执行完上传后,开始上传下一张
                if(i==data.path.length){   //当图片传完时,停止调用          
                    console.log('执行完毕');
                    console.log('成功:'+success+" 失败:"+fail);
                }else{//若图片还没有传完,则继续调用函数
                    console.log(i);
                    data.i=i;
                    data.success=success;
                    data.fail=fail;
                    that.uploadimg(data);
                }
                    
                }
            });
        }

    复制代码

     

    多张图片上传的方法写好了,下面就是引用:

     

    复制代码

    var app=getApp();
    Page({
       data:{
          pics:[]
       },
       choose:function(){//这里是选取图片的方法
          var that=this,
          pics=this.data.pics;
    
          wx.chooseImage({
               count: 9-pics.length, // 最多可以选择的图片张数,默认9
               sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
               sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
               success: function(res){
               var imgsrc=res.tempFilePaths; 
             pics=pics.concat(imgsrc);  
                that.setData({
                    pics:pics
                });
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
    
       },
       uploadimg:function(){//这里触发图片上传的方法
           var pics=this.data.pics;
           app.uploadimg({
               url:'https://........',//这里是你图片上传的接口
               path:pics//这里是选取的图片的地址数组
            });
      },
       onLoad:function(options){
    
      }
    
    })

    复制代码

     刚好写了一个node上传图片代码,亲测可以使用,

    一个简单的PHP接收代码:

    复制代码

    <?php 
        $imgname = $_FILES['file']['name'];
        $tmp = $_FILES['file']['tmp_name'];
        $filepath = 'now/';//记得要自己创建这个文件夹
        if(move_uploaded_file($tmp,$filepath.$imgname.".png")){
            echo "上传成功";
        }else{
            echo "上传失败";
        }
    
     ?>

    复制代码

     完结。

    想了解更多的小程序的知识请添加微信小程序开发交流群:368506119

     

    转载:https://www.cnblogs.com/xjwy/p/6956120.html

    展开全文
  • 微信小程序实现一张或多张图片上传(云开发)

    千次阅读 多人点赞 2020-03-27 13:37:22
    这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的。大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中。 二、素材图: : 三、效果图: 四、代码: wxml: <!--...

    一、简介:

    这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的。大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中。

    二、素材图:

    在这里插入图片描述
    在这里插入图片描述

    三、效果图:

    在这里插入图片描述
    在这里插入图片描述

    四、代码:

    wxml:

    <!--miniprogram/pages/fb/fb.wxml-->
    <view class='pages'>
      <view class='top'><text class='top_name'>商品图片:</text></view>
      <!-- 图片 -->
      <view class="images_box">
        <block wx:key="imgbox" wx:for="{{imgbox}}">
          <view class='img-box'>
            <image class='img' src='{{item}}'></image>
            <view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
              <image class='img' src='../../images/delect.png'></image>   
            </view>
          </view>
        </block>
        <view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
          <image class='img' src='../../images/add_image.png'></image>   
        </view>
      </view>
      <button bindtap='fb'>上传图片</button>
    </view>
    

    wxss:

    /* miniprogram/pages/fb/fb.wxss */
    page{
      background-color: rgba(200, 198, 201, 0.527);
    }
    .pages{
      width: 98%;
      margin: auto;
      overflow: hidden;
    }
    .top{
      width: 100%;
      overflow: hidden;
      margin: auto;
      font-size: 50rpx;
      background-color: white;
      border-left: 8rpx solid rgb(9, 245, 60);
      border-bottom: 1rpx solid rgba(117, 116, 116, 0.527);
    }
    .top_name{
      margin-left: 20rpx;
    }
    /* 图片 */
    .images_box{
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      background-color: white;
    }
    .img-box{
      border: 5rpx;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.452);
      width: 200rpx;
      height: 200rpx;
      margin-left: 35rpx;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      position: relative;
    }
    /* 删除图片 */
    .img-delect{
      width:50rpx;
      height:50rpx;
      border-radius:50%;
      position:absolute;
      right:-20rpx;
      top:-20rpx;
    }
    .img{
      width: 100%;
      height: 100%;
    }
    .jiage{
      height: 60rpx;
      width: 90%;
      margin-left: 5%;
      margin-right: 5%;
      background-color: white;
      display: flex;
      justify-content: flex-start;
    }
    .rmb{
      width: 280rpx;
      border: 2rpx solid rgb(199, 197, 197);
    }
    button{
      margin-top: 20rpx;
      background-color: green;
    }
    .radio-group{
      display: flex;
    }
    

    js:

    // pages/fb/fb.js
    const app = getApp()
    const db = wx.cloud.database();//初始化数据库
    Page({
      /**
        * 页面的初始数据
        */
      data: {
        imgbox: [],//选择图片
        fileIDs: [],//上传云存储后的返回值
      },
    
      // 删除照片 &&
      imgDelete1: function (e) {
        let that = this;
        let index = e.currentTarget.dataset.deindex;
        let imgbox = this.data.imgbox;
        imgbox.splice(index, 1)
        that.setData({
          imgbox: imgbox
        });
      },
      // 选择图片 &&&
      addPic1: function (e) {
        var imgbox = this.data.imgbox;
        console.log(imgbox)
        var that = this;
        var n = 5;
        if (5 > imgbox.length > 0) {
          n = 5 - imgbox.length;
        } else if (imgbox.length == 5) {
          n = 1;
        }
        wx.chooseImage({
          count: n, // 默认9,设置图片张数
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
            // console.log(res.tempFilePaths)
            // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
            var tempFilePaths = res.tempFilePaths
    
            if (imgbox.length == 0) {
              imgbox = tempFilePaths
            } else if (5 > imgbox.length) {
              imgbox = imgbox.concat(tempFilePaths);
            }
            that.setData({
              imgbox: imgbox
            });
          }
        })
      },
    
      //图片
      imgbox: function (e) {
        this.setData({
          imgbox: e.detail.value
        })
      },
    
    
      //发布按钮
      fb: function (e) {
        if (!this.data.imgbox.length) {
          wx.showToast({
            icon: 'none',
            title: '图片类容为空'
          });
        } else {
            //上传图片到云存储
            wx.showLoading({
              title: '上传中',
            })
            let promiseArr = [];
            for (let i = 0; i < this.data.imgbox.length; i++) {
              promiseArr.push(new Promise((reslove, reject) => {
                let item = this.data.imgbox[i];
                let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名
                wx.cloud.uploadFile({
                  cloudPath: new Date().getTime() + suffix, // 上传至云端的路径
                  filePath: item, // 小程序临时文件路径
                  success: res => {
                    this.setData({
                      fileIDs: this.data.fileIDs.concat(res.fileID)
                    });
                    console.log(res.fileID)//输出上传后图片的返回地址
                    reslove();
                    wx.hideLoading();
                    wx.showToast({
                      title: "上传成功",
                    })
                  },
                  fail: res=>{
                    wx.hideLoading();
                    wx.showToast({
                      title: "上传失败",
                    })
                  }
    
                })
              }));
            }
            Promise.all(promiseArr).then(res => {//等数组都做完后做then方法
              console.log("图片上传完成后再执行")
              this.setData({
                imgbox:[]
              })
            })
    
          }
      },
    
    })
    
    展开全文
  • 微信小程序上传图片

    2018-11-27 18:17:07
    //添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var that = this; var imgNumber = evalList[index].tempFilePaths; i...
  • 调用微信JS-SDK接口上传图片

    万次阅读 多人点赞 2020-07-04 18:54:13
    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,...
  • 微信小程序实现图片上传

    万次阅读 2018-07-25 17:26:20
    如图: 直接上代码: wxml: &lt;view class="weui-uploader"&gt; &lt;view class="weui-uploader__hd"...图片上传&lt;/view&gt; &lt;/view&gt; &lt;v
  • 微信图片上传

    千次阅读 2018-05-24 16:55:14
    可是事情没有那么顺利,因为有一个上传图片的功能。刚开始做的时候感觉没有任何问题,结果部署到app上和进行微信测试的时候出大毛病了 方案一: 使用单机事件,单机的时候创建一个type=file的input并且执行click...
  • js使用微信上传图片功能

    千次阅读 2019-03-26 16:42:54
    在说上传图片之前,先说一下准备工作,其实在上一篇微信分享功能那篇文章已经说过了,就是使用wx.config里面去把appId、timestamp、nonceStr、signature这四个参数的值给加上,这些准备工作跟分享是一样的,微信目前...
  • 关于微信内置浏览器,打开图片上传功能,调用的问题 前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述:显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢...
  • 是这样的,最近做一个公众号上传图片的问题,我已经做好了上传一张...图片上传后是可以下载到服务器里的。现在的问题是,要求上传4张图片,然后全部可以下载到服务器里,不知道有没有大神做过,求个具体的代码,谢谢!
  • 微信图文消息中如何使用svg图片

    万次阅读 2017-06-21 10:55:57
    微信图文消息无法上传svg格式图片,但是可以通过浏览器开发者工具进行hack 将svg图片使用文本编辑器打开,复制内容 登录微信公众平台,新建图文消息 输入正文的输入框中输入随意文字 打开浏览器控制台,找到步骤2输入...
  • 编辑器里有上传图片,刚开始这样写:&lt;input type="file" @change="onRead($event, index)" accept="image/png,image/jpeg,image/gif,image/jpg" class="van-uploader__...
  • 微信内嵌浏览器上传图片调用相机

    千次阅读 2016-05-25 10:27:42
    input type="file" name="upload" onchange="onChooseFile(this)" accept="image/png,image/jpeg,image/gif" capture="camera">
  • 如题。。用这个接口给我返回的是...我知道可以上传微信服务器获取mediaId,我的服务器可以用这个mediaId从微信服务器那边取图片。。。我想请问有没有办法从我前台直接取得图片数据,直接提交给我自己的服务器呢?
  • 微信小程序实现文件,图片上传

    万次阅读 2017-12-23 16:52:07
    在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用。 这里我说一下微信小程序如何实现图片的上传 1、在微信公众号平台设置uploadFile合法...2、使用wx.chooseImage和wx.uploadFile实现图片上传 代码如下 wx
  • 微信JSSDK上传多张图片

    万次阅读 2016-06-25 10:33:51
    做过微信开发的都知道,在部分android机型里微信不支持网页上传图片的,这是由于这些机型的文件上传存在内存泄漏,会导致微信闪退,所以微信内置浏览器将文件上传屏蔽。这就导致这些机型的用户在使用微信浏览器访问...
  • 有些安卓的微信浏览微网站,不能通过file上传文件、图片,但是ios系统的都是可以上传图片。网上有很多人说是微信阉割了file的上传功能,但是微社区确实可以上传图片,应该是他们自己写的一个上传插件,就是将图片...
  • https://blog.csdn.net/qq_16741383/article/details/77427555
  • wx.upload()的api文档上是上传一个的,如何上传多张图片
1 2 3 4 5 ... 20
收藏数 37,528
精华内容 15,011
关键字:

微信图片上传