JS_js上传文件获取base64

拼搏现实的明天。 2022-11-21 09:47 229阅读 0赞

#### html ####

#### 监听选择的文件 ####

let xw_File = document.getElementById("xw_File");
    xw_File.addEventListener("change", ()=> { 
    	xw_show(xw_File.files)
    	return;
    })

图片实例：  
![在这里插入图片描述][20201031114925792.png_pic_center]

#### 传入文件实例 获取图片数据 ####

获取单个数据base64

function xw_show(xw_filedata){ 
    	var imgReaderl = new FileReader();
    	imgReaderl.onload = function(evt) { 
    		console.log(evt.target.result)		//图片base64
    	}
    	imgReaderl.readAsDataURL(xw_filedata[0]);
    }

图片实例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]

获取多个数据base64

图片实例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center 1]

[20201031114925792.png_pic_center]: /images/20221120/a442b0c17fa44135b4000139e3300bef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201031114954400.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201031115032689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ==,size_16,color_FFFFFF,t_70#pic_center