h5将上传图片转换成base64值

本文介绍如何在H5中将上传的图片转换为Base64值,并通过示例展示了Ruby后台如何处理接收到的Base64编码,将其保存为文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  $("#article_image").change(function(){
    var file = this.files[0];
        //判断类型是不是图片  
        if(!/image\/\w+/.test(file.type)){     
                alert("请确保文件为图像类型");   
                return false;   
        }   
        var reader = new FileReader();   
        reader.readAsDataURL(file);   
        reader.onload = function(e){
          image_base64=this.result.split(",")[1];
           //就是base64 
          article_image = image_base64;   
        }

  });

后台接收的时候可以将image_base64传递到后台

ruby语言后台处理

def self.base64_cover_file(base64_code, img_type ='jpg')
    path = Rails.root.join("public", "#{Digest::MD5.hexdigest(SecureRandom.random_number.to_s)}.#{img_type}")
    File.open(path, 'wb') do |f|
      f.write(Base64.decode64(base64_code))
    end

    path.to_s  //这样得到的路径是完整的路径.但是要赋值给对象属性只需要public后面的东西就可以了.所以用的时候根据存储位置处理下.
  end


### 将图片文件换为 Base64 编码 在 UniApp H5 环境中,可以利用 FileReader API 来实现将图片文件读取并换为 Base64 字符串。此方法适用于处理用户上传图片或其他形式获取到的 File 对象。 以下是具体实现方式: #### HTML 部分 为了方便测试,这里提供了一个简单的输入框用于选择本地图片文件。 ```html <input type="file" id="uploadImage" accept="image/*"> <div id="result"></div> ``` #### JavaScript 实现逻辑 通过监听文件输入控件的变化事件来触发图片Base64换过程。 ```javascript document.getElementById('uploadImage').addEventListener('change', function(event){ let files = event.target.files; if(files.length === 0) { console.log("未选择任何文件"); return; } let reader = new FileReader(); // 当readAsDataURL完成时会触发loadend事件,在回调函数里可以获得base64编码后的字符串 reader.onloadend = function(e) { document.getElementById('result').innerText = e.target.result; // 显示结果 console.log("Base64 string:", e.target.result); }; // 开始异步读取指定的 Blob 或 File 内容作为 data URL 形式的 Base64 编码字符串 reader.readAsDataURL(files[0]); }); ``` 上述代码展示了如何捕获用户的文件选择操作,并使用 `FileReader` 类中的 `readAsDataURL()` 方法把选中的图像文件化为 Data URL 格式的数据流,即包含了 MIME 类型前缀(如 "data:image/png;base64,")以及后续跟随的实际 Base64 编码数据[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值