美文网首页
vue 上传图片到OSS

vue 上传图片到OSS

作者: 叶情宇 | 来源:发表于2019-05-30 08:29 被阅读0次
    npm install ali-oss  安装
    
     uploadFile( imageDataUrl, field){//base64数据
                console.log('裁剪成功=====>');
                console.log('imageDataUrl :', imageDataUrl);
                console.log('field :', field);
    
                let OSS = require('ali-oss');
                let client = new OSS({
                    region: 'oss-cn-beijing',
                    accessKeyId: xxxxxx,
                    accessKeySecret: 'xxxxxxxxxxx',
                    bucket: 'yeqingyu-bucket'
                });
                const base64 = imageDataUrl.split(',').pop();//出去头部image/data
                const fileType = imageDataUrl.split(';').shift().split(':').pop();
                const blob = this.toBlob(base64, fileType);
                this.putBlob(client,blob);
    
         },
            //异步上传图片
           async  putBlob (client,blob) {
                try {
                    var timestamp = (new Date()).getTime();
                    let fileName  = 'mcdull/'+timestamp+'.png';
                    let result = await client.put(fileName, blob);
                    this.editItem.cover = result.url;
                     this.$refs.uploader.off();
                    console.log(result);
                } catch (e) {
                    console.log(e);
                }
             },
    
            toBlob(urlData,fileType) {
                let bytes = window.atob(urlData);
                let n = bytes.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bytes.charCodeAt(n);
                }
                return new Blob([u8arr], { type: fileType });
            },
    
    

    相关文章

      网友评论

          本文标题:vue 上传图片到OSS

          本文链接:https://www.haomeiwen.com/subject/bfgptctx.html