码迷,mamicode.com
首页 > Web开发 > 详细

七牛,前端上传图片

时间:2018-06-09 16:38:50      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:inpu   mda   comment   img   files   图片   false   ini   com   

文本框:

<input type="file" class="file-picker" multiple accept="image/*" @change="selectImg">

调用函数:

selectImg: function(e){
                    var that = this;
                    var files = e.target.files;
                    for(var i = 0; i < files.length; i++){
                        that.upImg(files[i], function(path){
                            that.comment.pics.push(path);
                        });
                    }
                },
                upImg: function(file, callback){
                    var that = this;
                    that.fileToken(function(access_token){
                        var form = new FormData();
                        form.append(‘file‘, file);
                        form.append(‘token‘, access_token);
                        $.ajax({
                            // url: ‘http://up-z2.qiniu.com/‘,
                            url: (window.location.protocol === ‘https:‘)? ‘https://upload-z2.qbox.me‘: ‘http://upload-z2.qiniu.com‘,
                            data: form,
                            processData: false,
                            contentType: false,
                            type: ‘POST‘,
                            success: function(data){
                                console.log(data);
                                var path = ‘https://img.yishou520.com/‘ + data.key;
                                callback(path);
                            }
                        });
                    });
                },
                // 获取七牛上传token
                fileToken: function(callback){
                    var that = this;
                    that.fetch({
                        url: ‘qiniu/token‘,
                        success: function(access_token){
                            callback(access_token);
                        }
                    })
                }

 

七牛,前端上传图片

标签:inpu   mda   comment   img   files   图片   false   ini   com   

原文地址:https://www.cnblogs.com/lixingbaophp/p/9159830.html

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