Home  >  Q&A  >  body text

javascript - How to upload front-end base64 images to Alibaba Cloud oss

How to upload front-end base64 images to Alibaba Cloud oss

phpcn_u1582phpcn_u15822634 days ago2374

reply all(3)I'll reply

  • 滿天的星座

    滿天的星座2017-07-05 10:28:13

    First put the data decode_base64, and then pass

    • For streaming upload, upload the solved content directly

    • Upload the file, save it as a temporary file, and then upload it in the traditional way

    reply
    0
  • 習慣沉默

    習慣沉默2017-07-05 10:28:13

    Have you obtained the base64 image now? If so, then just call the upload interface corresponding to oss. If you have not obtained the image in base64 format, use the following method:

    init : function(options) {
                var oThis = this;
                if( typeof FileReader==='undefined' ) { 
                    this.imgBox.innerHTML = "抱歉,你的浏览器不支持 FileReader"; 
                    this.file.setAttribute('disabled','disabled'); 
                } else { 
                    this.file.addEventListener('change', oThis.readFile.bind(this), false); 
                } 
            },
            readFile : function(event) {
                var file = this.file.files[0],
                    oThis = this;
                    console.log(this);
                if ( !oThis.reg.test(file.type) ) { 
                    alert("文件必须为图片!"); 
                    return; 
                } 
                var reader = new FileReader();
                reader.readAsDataURL(file); 
                reader.onload = function(e) { 
                    var img = new Image(),
                        length = this.result.length,
                        result = this.result;
                    img.src = result;
                    img.onload = function () {
                        if ( length > oThis.maxSize ) {
                            result = oThis.compress(img);
                        } 
                        oThis.imgBox.src = result;
                        oThis.cb(result);
                    };
                } 
            },
            compress : function(img) {
                var width = img.width,
                    height = img.height,
                    data = null;
                this.canvas.width = img.width;
                this.canvas.height = img.height;
                this.ctx.drawImage(img, 0, 0, width, height);
                data = this.canvas.toDataURL('image/jpeg', this.ratio);
                return data;
            }

    reply
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-07-05 10:28:13

    Look here -- http://www.jianshu.com/p/665d...

    reply
    0
  • Cancelreply