How to convert vue.js images to Base64, upload images and preview them

This article introduces you to how to convert vue.js images to Base64 to upload images and preview them. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

For front-end personnel, image processing is a very common requirement. Since the image is slightly special, most methods now use the ajax interface to submit it through the http method, such as the post method to submit, and return after background processing. An image path is given to the front end, and the front end writes the img tag according to this path. However, based on the current development model of separation of front and rear ends, the front and rear end codes are often not in the same system directory, and the liunx path and the windows path may be different during deployment. Such later path changes may cause maintenance difficulties.

To address this problem, here I recommend converting the image to base64 format and then sending it to the backend. The backend only needs to store the transcoding results in the database, and the frontend calls the interface to directly obtain the base64 data and write it directly. Enter the img src tag

The following uses the element ui upload component to implement the idea

The code is as follows:

  <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 ''
            }
        })

      };          
    },

Finally, in the interface img src Just bind the base64 string returned by the That.getSysLogo() interface to the label!
Recommended related articles:

How to define global variables and global methods in vue? (Code)

#How to mount the vue component globally? Introduction to the method of mounting Vue components globally (code)

The above is the detailed content of How to convert vue.js images to Base64, upload images and preview them. For more information, please follow other related articles on the PHP Chinese website!