一般来说，照片在后台处理后会返回到前端照片网络地址，甚至是base64流，将照片存放在三方的云存储服务也非常方便和容易管理，有时需要在前端生成base64。本文主要讨论基本JavaScript将图片转换为base64的情况。

整个案例

！DOCTYPE html

Html lang='en '

头(电影)

meta charset=' utf-8 '

元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

meta http-equiv=' x-ua-compatible ' content=' ie=edge '

标题基本JS base64案例/标题

/head

菩提

Div类=' upload-img '

Img id='img '

Input type='file' id='img-select '

/div

Script type='text/javascript '

Function imgPreview() {

If(！/。(gif | jpg | JPEG | png | BMP | gif | jpg | png)$/。test(this . value){

Alert('图片类型为.必须是下列之一：gif、jpeg、jpg、png、bmp！”)。

Return false

}

Var files=this.files

var file=files[0]；

var reader=new file reader()；

Reader.onload=function() {

Var result=this.result

Document.getelementbyid ('img ')。src=result//img的id

Console.log('base64 '，result)

}

Reader.readasdataurl(文件)；

}

document . getelementbyid(' img-select ')。addeventlistener ('change '，img preview)；

/脚本

/body

/html

此示例从控制台控制台输出了base64。如您所见，您可以使用base64在线工具传输照片。

可能需要以下内容：

基本js将图片转换为base64案例。

Vue将图片转换为base64流编码。

Element Ui将图片转换为base64的实例