vue.js 画像を Base64 に変換し、画像をアップロードしてプレビューする方法

この記事では、vue.js の画像を Base64 に変換してアップロードし、プレビューする方法を紹介します。必要な方は参考にしていただければ幸いです。

フロントエンド担当者にとって、画像処理は非常に一般的な要件です。画像は少し特殊であるため、ほとんどのメソッドはポストメソッド送信など、http メソッドを介して送信し、バックグラウンド処理後に画像パスを返します。フロントエンド、フロントエンドはこのパスに従って img タグを書き込みますが、現在のフロントエンドとバックエンドの分離開発モードに基づいて、フロントエンドとフロントエンドのコードは同じシステムにないことがよくあります。 liunx パスと Windows パスは展開中に異なる可能性があるため、後でパスが変更されるとメンテナンスが困難になる可能性があります。

この問題に対応して、ここでは画像を Base64 形式に変換してからバックエンドに送信することをお勧めします。バックエンドは、トランスコーディング結果をデータベースに保存するだけで済みます。フロントエンドは、インターフェイスを呼び出して Base64 データを直接取得します。それを img src タグに直接書き込みます。

以下では、要素 ui アップロード コンポーネントを使用してアイデアを実装します

コードは次のとおりです:

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

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

      };          
    },

最後に、That によって返された Base64 文字列をバインドします。インターフェイス img src タグ内の .getSysLogo() インターフェイス!
おすすめ関連記事:

vueでグローバル変数とグローバルメソッドを定義するには? (コード)

vue コンポーネントをグローバルにマウントするにはどうすればよいですか? Vueコンポーネントをグローバルワールドにマウントする方法(コード)の紹介

以上がvue.js 画像を Base64 に変換し、画像をアップロードしてプレビューする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。