zoukankan      html  css  js  c++  java
  • vue 微信公众号图片上传接口

    结合elemen ui 

     <el-upload
                          class="upload-demo"
                          :on-preview="handlePreview"
                          action="66666"
                            :on-remove="handleRemove"
                              multiple
                          :before-upload="shopbeforeAvatarUpload">
                          <el-button size="small" type="primary"  @click='getupload()'>点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                        </el-upload>

    跨越问题,下次再补上解决方法

    getupload(){
                    this.$http.put(wechatapi+'/token?access-token='+this.token).then((res)=> {
                        
                        this.upload = '/cgi-bin/material/add_material?access_token='+ res.body+'&type=image';
                        return   
                    }).catch((error)=> {})
    },
     shopbeforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                      this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    this.$http.put(wechatapi+'/token?access-token='+this.token).then((res)=> {
    
                        var fd =new FormData();
                        fd.append('media',file,file.name);
    
                        this.$http.post('/cgi-bin/material/add_material?access_token='+ res.body+'&type=image',fd,{emulateJSON:true}).then((res)=>{
                            console.log(res)
                        }).catch((res)=>{})                 
                    }).catch((error)=> {})
                    return false
    },

    另外获取微信token的接口是封装过的

  • 相关阅读:
    leetcode Remove Linked List Elements
    leetcode Word Pattern
    leetcode Isomorphic Strings
    leetcode Valid Parentheses
    leetcode Remove Nth Node From End of List
    leetcode Contains Duplicate II
    leetcode Rectangle Area
    leetcode Length of Last Word
    leetcode Valid Sudoku
    leetcode Reverse Bits
  • 原文地址:https://www.cnblogs.com/xiaoluoli/p/8256951.html
Copyright © 2011-2022 走看看