element上传图片转base64

element-admin的Tinymce富文本,上传图片改成本地处理

html

<el-upload :multiple="true" :file-list="fileList" :show-file-list="true"
   :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload" :headers="tokenHeader"
   class="editor-slide-upload" action="#" list-type="picture-card">
   <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

　　

 

 

js 主要是在 :before-upload里面处理

beforeUpload(file) {
            this.getBase64(file).then(res => {
                this.fileBase64 = res
            })
            const _self = this;
            const _URL = window.URL || window.webkitURL;
            const fileName = file.uid;
            this.listObj[fileName] = {};
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = _URL.createObjectURL(file);
                img.onload = function () {
                    _self.listObj[fileName] = {
                        hasSuccess: true,
                        uid: file.uid,
                        width: this.width,
                        height: this.height,
                        url: _self.fileBase64
                    };
                    _self.fileList.push({
                        url:_self.fileBase64,
                        uid:file.uid
                    })
                };
                resolve(false);
            });
        },
        getBase64(file) {
            return new Promise(function(resolve, reject) {
                let reader = new FileReader();
                let imgResult = "";
                reader.readAsDataURL(file);
                reader.onload = function() {
                imgResult = reader.result;
                };
                reader.onerror = function(error) {
                reject(error);
                };
                reader.onloadend = function() {
                resolve(imgResult);
                };
            });
        }