(工作随记)VUE+ElementUI 照片墙上传回显 Base64转码

工作中需要做一个照片墙一样的东西，做出来的效果是这样的

官方文档在这里  /#/zh-CN/component/installation

下面是一些代码片段，可以参考一下

<el-dialog
          //第一张图片的样式



    :visible="true"
  



    :title="dialogTitle"
  



    :before-close="onClose">
      



        <el-upload
        




            align="center"
                        



            action="/posts/"
        



            :on-preview="handlePictureCardPreview"
        //图片方法方法   



            :on-remove="handleRemove"
                     //删除方法




            :on-change="change"
                           //图片改动时触发




            :file-list="photoList"
        



            :auto-upload=""
        



            :disabled=""
        



            list-type="picture-card">
        



                <el-button 




                    :disabled="" 



                    size="small" 



                    type="primary">点击上传



                </el-button>
        



      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                                      



      </el-upload>




      <span slot="footer">
    



        <el-button @click="onClose">取消</el-button>
    



        <el-button type="success" @click="submit">确认</el-button>
  



      </span>




</el-dialog>

//第二张图片的样式




<el-dialog v-model="dialogVisible" size="tiny">
  



    <img width="100%" :src="dialogImageUrl" alt="">
  



    <el-form :model="form">
    



        <el-form-item
      label="链接地址"
      label-width="13%">
      



            <el-input v-model=""/>
    



        </el-form-item>
    



        <el-form-item align="center">
      



            <el-button @click="addrOnClose">取消</el-button>
      



            <el-button type="success" @click="addrSubmit">确认</el-button>
    



        </el-form-item>
  



   </el-form>




</el-dialog>

 

下面的方法比较核心，是前端转码的方法 ，回显的话把Base64放到URL里就可以直接显示啦。如果不转码的话出来的url是blob:http://localhost:3000/f64f6f96-1eca-4c4b-8cd5-c20994e27cfa这个样子的，但是这个样子的链接地址放到后端去找图片转码会失败，因为转义的斜杠会变成反斜杠，找不到图片所以会失败，正在找解决的方法，暂且先在前端转码成功后传到后端。（有知道的小伙伴可以指教一下）

getBase64 (file) {
          //要上传的图片转Base64




    return new Promise(function (resolve, reject) {
    



    let reader = new FileReader()
    



    let imgResult = ''
    



    reader.readAsDataURL(file)
    



    reader.onload = function () {
      



        imgResult = reader.result
    



    }
    



    reader.onerror = function (error) {
      



        reject(error)
    



    }
    



    reader.onloadend = function () {
      



        resolve(imgResult)
    



    }
  



  })




}



 



change (file, fileList) {



    this.getBase64(file.raw).then(res => {
  



        console.log(res)            //转码之后的输出




    })



}

后端转Base64方法

public static String getImgStr(String imgFile){
    



    //将图片文件转化为字节数组字符串，并对其进行Base64编码处理
    



    InputStream in = null;
    



    byte[] data = null;
    



    //读取图片字节数组
    



    try
    {
        



        in = new FileInputStream(new File(imgFile));
        



        data = new byte[()];
        (data);
        ();
                



    }
    



    catch (IOException e)
    {
        



        ();
    



    }
    



    return new String(Base64.encodeBase64(data));




}