Vista previa de la imagen elemento base64 Vista previa de carga de la imagen

https://www.jianshu.com/p/bee8c393c422  gracias

Utilicé el elemento ui, el deseo es no cargar inmediatamente después de seleccionar el archivo de imagen, primero mostrar la imagen de vista previa, hacer clic en el botón de carga y luego cargar, la versión del elemento es 2.13

Utiliza  URL.createObjectURL (file.raw)

html

　　　　　　　　　　　　　　< el-upload
                           class = "avatar-uploader" action = "https://jsonplaceholder.typicode.com/posts/" 
                          ref = "upload" 
                          : show-file-list = "false" 
                          : auto-upload = "false" 
                          : on-success = "handleAvatarSuccess" 
                          : before-upload = "beforeAvatarUpload" 
                          : on-change = "onchange" 
                          > 
                          < img v-if = "form.img" : src = "form.img " class =" avatar " >
                          < i v-else class = "el-icon-plus avatar-uploader-icon" > </ i > 
                        </ el-upload > 
                        < el-button type = "success" style = "margin-left: 10px;" @click = "upimg" >上传</ el-button >

js

onchange: function (file, filelist) { 
                let fileName = file.name; 
                let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; 
                if (regex.test (fileName.toLowerCase () )) { 
                    // console.log (URL.createObjectURL (file.raw)) 
                    Vue.set (this.form, "img", URL.createObjectURL (file.raw)) // La nueva versión necesita hacer esto, la versión anterior parece ser Hay una URL directamente en el archivo o en la lista de archivos. El uso de Vue.set se debe volver a representar 
                } else { 
                    this. $ Message.error ('Seleccione un archivo de imagen'); 
                } 
            }

 

 

Luego, la imagen se convierte a base64. No tiene nada que ver con lo anterior, pero se encuentra aquí para hacer un registro.

function img264 (imgUrl) { 
                let that = this 
                window.URL = window.URL || window.webkitURL;
                       var xhr = new XMLHttpRequest (); 
                      xhr.open ( "get", imgUrl, true );
                       // important 
                      xhr .responseType = "blob" ; 
                      xhr.onload = function () {
                         if ( this .status == 200 ) {
                           // Obtenga un objeto blob 
                          varblob = this .response; 
                          console.log ( "blob" , blob)
                           // 至关重要 
                          let oFileReader = new FileReader (); 
                          oFileReader.onloadend = function (e) { 
                            let base64 = e.target.result; 
                            console.log ( "方式 一》》》》》》》》》" , base64)
                             // that.form.img = base64 
                            that. $ set (form, "img" , base64) 
                          };
                          oFileReader.readAsDataURL (blob); 
                          
                 
                        } 
                      } 
                      xhr.send (); 
            }