图片上传与文件域编码到Base64在ExtJs 4 - Image Upload with filefield Encoding to Base64 in ExtJs 4

Image Upload with filefield Encoding to Base64 in ExtJs 4

本文关键字：Base64 ExtJs 编码文件 | 更新日期: 2023-09-27

如何上传图像并将图像转换为base64字符串，这里有一些extjs上的侦听器代码:

xtype: 'filefield',
id: 'image',
emptyText: '-- Choose Image --',
fieldLabel: 'Photo',
name: 'image',
anchor: "82%",
buttonText: 'Browse',
buttonConfig: {
iconCls: ''
},
change: function() {
// this is get component
var valueElement = Ext.getCmp("component_image_upload").getValue();
// function upload image full path and encode to base64
// function here
// result to encode base64
var GenEncoded = valueElement;
Ext.getCmp("component_textarea").setValue( GenEncoded );

我尝试添加btoa函数，但它只是转换字符串上的文件域，而不是上传图像:

// result to encode base64
var GenEncoded = btoa(valueElement);
Ext.getCmp("ttransdelivery_module_manualreceive_form_receive_ar_1_general_blk_i_form_text_2031").setValue( GenEncoded );

谢谢

您可以使用FileAPI。但请记住，并不是所有浏览器都支持它。检查caniuse是否支持。

这个应该可以工作:

change: function() {
     var valueElement = Ext.getCmp("component_image_upload").getValue();
     var reader = new FileReader();
     reader.onload = function(e) {
         Ext.getCmp("component_textarea").setValue(e.target.result);
     };
     reader.onerror = function(e) {
         //error reading file
     };  
     reader.readAsDataURL(valueElement.el);
}

查看FileReader的api获取更多信息

感谢您的帮助，这是我的侦听器代码。下面的代码是:

change: function() {
     var valueElement = Ext.getCmp('image').getEl().down('input[type=file]').dom.files[0];            
     var reader = new FileReader();
     reader.onload = function(e) {
          Ext.getCmp("ttransdelivery_module_manualreceive_form_receive_ar_1_general_blk_i_form_text_2031").setValue(e.target.result);
     };
     reader.onerror = function(e) {
          alert('The File APIs are not fully supported in this browser.');
     };  
     reader.readAsDataURL(valueElement);
}

Thanks for help mate