So konvertieren Sie vue.js-Bilder in Base64, laden Bilder hoch und zeigen eine Vorschau an

In diesem Artikel erfahren Sie, wie Sie vue.js-Bilder in Base64 konvertieren und in der Vorschau anzeigen können. Ich hoffe, dass er für Sie hilfreich ist.

Für Front-End-Mitarbeiter ist die Bildverarbeitung eine sehr häufige Anforderung. Da das Bild etwas Besonderes ist, verwenden die meisten Methoden jetzt die Ajax-Schnittstelle, um es über die http-Methode zu senden, z. B. die Post-Methode zum Senden. und kehrt nach der Hintergrundverarbeitung zum Front-End zurück, und das Front-End schreibt das IMG-Tag gemäß diesem Pfad. Basierend auf dem aktuellen Entwicklungsmodus wird jedoch das Front-End und das Rear-End getrennt Codes befinden sich häufig nicht im selben Systemverzeichnis und der LIUNX-Pfad und der Windows-Pfad können während der Bereitstellung unterschiedlich sein. Solche späteren Pfadänderungen können zu Wartungsschwierigkeiten führen.

Um dieses Problem zu beheben, empfehle ich hier, das Bild in das Base64-Format zu konvertieren und es dann an das Backend zu senden. Das Backend muss nur die Transkodierungsergebnisse in der Datenbank speichern, und das Frontend ruft die Schnittstelle auf, um sie direkt abzurufen Geben Sie die Base64-Daten ein und schreiben Sie sie direkt.

Im Folgenden wird die Element-UI-Upload-Komponente verwendet, um die Idee umzusetzen

Der Code lautet wie folgt:

  <el-upload
      ref=&#39;upload&#39;
      :auto-upload=&#39;false&#39; 
      :file-list="fileList" 
      :multiple=&#39;false&#39;
      :limit="1"
      :on-exceed="handleExceed"
      :http-request="uploadFiles" 
      accept="image/jpeg,image/gif,image/png"
      action=&#39;&#39;
      :on-change=&#39;changeUpload&#39;           
      >
    <el-button slot="trigger" size="mini" type="primary">选取图片</el-button>
    <span> </span>
    <el-button @click=&#39;uploadFiles&#39; size="mini" type="primary">点击上传</el-button>
 </el-upload>

js-Teil

    //点击上传图片,上传成功返回图片路径 
    uploadFiles(){
        var That=this;
      let file=this.$refs.upload.$refs['upload-inner'].$refs.input; //获取文件数据
      let fileList=file.files;      
      var imgFile;
      let reader = new FileReader();     //html5读文件
      reader.readAsDataURL(fileList[0]); //转BASE64       
      reader.onload=function(e) {        //读取完毕后调用接口
        imgFile = e.target.result;
        let obj={
            id: "loginLogo",
            configGroup: "logo",
            configItem : "loginLogo",
          itemValue : imgFile    
        }
        return BaseApi.uploadFiles(obj).then((res)=>{
            if(res.status=='SUCCESS'){
                AlertBox('图片上传成功！','success',true).then(()=>{
                    return That.getSysLogo(); //调用获取base64数据接口
                });
            }else{
                Alert('图片上传失败',res);
                return ''
            }
        })

      };          
    },

Endlich in der Schnittstelle img src Binden Sie einfach den von der Schnittstelle That.getSysLogo() zurückgegebenen Base64-String an das Etikett!
Empfohlene verwandte Artikel:

Wie definiere ich globale Variablen und globale Methoden in Vue? (Code)

Wie mounte ich Vue-Komponenten global? Einführung in die Methode zum globalen Mounten von Vue-Komponenten (Code)

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie vue.js-Bilder in Base64, laden Bilder hoch und zeigen eine Vorschau an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!