Question

如何上传图片并将图片转换为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 );

谢谢

Answer 1

您可以使用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以获取更多信息。

Answer 2

感谢您的帮助，这是我的听众代码。这段代码工作：

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

感谢您的帮助配偶

图像上传文件字段编码到ExtJs 4中的Base64

2 个答案: