码迷,mamicode.com
首页 > 微信 > 详细

微信公众号图片上传接口

时间:2018-01-10 11:24:16      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:接口   封装   handle   结合   blog   catch   multi   jpg   slot   

结合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的接口是封装过的

微信公众号图片上传接口

标签:接口   封装   handle   结合   blog   catch   multi   jpg   slot   

原文地址:https://www.cnblogs.com/xiaoluoli/p/8256951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!