vue.js 이미지를 Base64로 변환하고 이미지를 업로드하고 미리 보는 방법

이 글은 vue.js 이미지를 Base64로 변환하여 이미지를 업로드하고 미리 보는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

프론트엔드 직원의 경우 이미지 처리는 매우 일반적인 요구 사항입니다. 이미지는 약간 특별하기 때문에 이제 대부분의 메서드는 사후 메서드 제출과 같은 http 메서드를 통해 제출하고 백그라운드 처리 후 이미지 경로를 반환하는 데 ajax 인터페이스를 사용합니다. Front-end, front-end는 이 경로에 따라 img 태그를 작성하지만 현재의 front-end와 back-end 분리 개발 모드를 기준으로 보면 front-end와 front-end 코드가 동일한 시스템에 있지 않은 경우가 많습니다. 디렉토리, 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 part

    //点击上传图片,上传成功返回图片路径 
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!