Comment convertir des images vue.js en Base64, télécharger des images et les prévisualiser

Cet article vous présente comment convertir des images vue.js en Base64 pour télécharger des images et les prévisualiser. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pour le personnel front-end, le traitement de l'image est une exigence très courante. Étant donné que l'image est légèrement spéciale, la plupart des méthodes utilisent désormais l'interface ajax pour la soumettre via la méthode http, comme la méthode post pour soumettre, et retour après le traitement en arrière-plan. Un chemin d'image est donné à l'extrémité avant, et l'extrémité avant écrit la balise img selon ce chemin. Cependant, sur la base du mode de développement actuel de séparation des extrémités avant et arrière, l'extrémité avant et arrière. les codes ne se trouvent souvent pas dans le même répertoire système, et le chemin Linux et le chemin Windows peuvent être différents lors du déploiement. De telles modifications ultérieures du chemin peuvent entraîner des difficultés de maintenance.

Pour résoudre ce problème, je recommande ici de convertir l'image au format base64 puis de l'envoyer au backend. Le backend n'a qu'à stocker les résultats du transcodage dans la base de données, et le frontend appelle l'interface pour les obtenir directement. les données base64 et écrivez-les directement. Entrez la balise img src

Ce qui suit utilise le composant de téléchargement d'élément ui pour implémenter l'idée

Le code est le suivant :

  <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>

partie js

    //点击上传图片,上传成功返回图片路径 
    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 ''
            }
        })

      };          
    },

Enfin, liez simplement la chaîne base64 renvoyée par l'interface That.getSysLogo() dans la balise img src de l'interface !
Articles connexes recommandés :

Comment définir des variables globales et des méthodes globales dans vue ? (Code)

Comment monter les composants vue globalement ? Introduction à la méthode de montage des composants Vue globalement (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!