草庐IT

图片传输到ipfs节点然后将生成的ipfs访问链接存到区块链

不想当程序员的STAN 2023-07-13 原文

在区块链上直接存储图片不仅时间很长,而且需要进行分片和拼接,比较麻烦,我们直接使用ipfs存储图片

流程描述:

  1. 首先在本地搭建ipfs节点,使用go-ipfs版本进行搭建,搭建完之后,使用 ipfs daemon指令启动ipfs服务监听,同时占用8080端口。

    使用时我们需要先打开ipfs服务,再启动项目,避免端口冲突。正确启动之后的命令行应该如下图所示。

  2. 服务启动成功后,我们首先在我们的前端绑定一个input,这个input的type是file类型,同时指定一个id,我们通过这个id获取到这个文件(1)。然后将这个文件赋值(2)

    1.<input type="file" class="form-control add_img" id="co_img" placeholder="Ex: 请选择图片">
        
    2.const file = document.getElementById("co_img").files[0];
    
    
    
  3. 实现这两步之后,我们相当于把文件取出来了,取出来之后,我们再把这个文件当成参数传到saveImageOnIpfs方法里,saveImageOnIpfs方法里有一个ipfs.add()方法,此方法就是将图片传输到ipfs上,同时返回传输回的结果,会有一个hash值返回,resolve函数可以将hash值作为返回值再传到.then里的函数的参数,然后拼接成一个
    类似这种的链接,即href,然后我们再在这个this函数里面调用App.addcollectionsUp方法把链接和相关数据上传到区块链上。

    uploadimg:async function(){
            const file = document.getElementById("co_img").files[0];
            console.log(file)
            if(file==null){
                alert("未选择文件");
            }
            const httpGateway = 'http://127.0.0.1:8080'
            this.saveImageOnIpfs(file).then(function(hash){
                //这里就把图片的hash取出来之后同时拼接到了链接后面
                const href = `${httpGateway}/ipfs/${hash}`
                img_href = href;
                console.log(img_href);
                App.addcollectionsUp();
            })
        },
     saveImageOnIpfs: function(input) {
            return new Promise(async(resolve, reject) => {
                try {
                    //ipfs的add方法是将东西添加到ipfs网络上
                    let results = await ipfs.add(input);
                    let hash1 = results.path;
                    resolve(hash1);
                } catch (err) {
                    console.error(err);
                    reject(err);
                }
            })
        },
    
  4. addcollectionsUp函数定义如下:

        addcollectionsUp: async function() {
            let _conum = $("#co_num").val();
            // console.log(img_href);
            let _coprice = $("#co_price").val();
            let  _coname = $("#co_name").val();
            let _cointro = $("#co_intro").val();
            const { addCollectionUp } = this.meta.methods;
            let result = await addCollectionUp(_conum, _coprice, _coname,_cointro,img_href).send({ from: this.account });
            console.log(result);
            window.location.reload(); 
        },
    

    我们只需要把生成的href赋值给img_href就可以直接传到区块链上了。然后再取出来在前端渲染即可。

有关图片传输到ipfs节点然后将生成的ipfs访问链接存到区块链的更多相关文章

  1. ruby - 按值降序排列散列,然后按升序键入 ruby - 2

    我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做?例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500

  2. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手,所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格,我想要的三列是:公司名称、公司描述和Logo。对于名称,我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串,然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列? 最佳答案 对于“文本”数

  3. 区块链之加解密算法&数字证书 - 2

    目录一.加解密算法数字签名对称加密DES(DataEncryptionStandard)3DES(TripleDES)AES(AdvancedEncryptionStandard)RSA加密法DSA(DigitalSignatureAlgorithm)ECC(EllipticCurvesCryptography)非对称加密签名与加密过程非对称加密的应用对称加密与非对称加密的结合二.数字证书图解一.加解密算法加密简单而言就是通过一种算法将明文信息转换成密文信息,信息的的接收方能够通过密钥对密文信息进行解密获得明文信息的过程。根据加解密的密钥是否相同,算法可以分为对称加密、非对称加密、对称加密和非

  4. ruby - 按数字(从大到大)然后按字母(字母顺序)对对象集合进行排序 - 2

    我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合,其中每个对象都有一个“名称”属性,以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同,按类型分割(金>银>铜,即2金>1金+1银)3.如果奖牌和类型相同,则按字母顺序子排序我正在用ruby​​做这件事,但我想语言并不重要。我确实找到了一个解决方案,但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此,如果他们有2个金牌和1个银牌,加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的,因此列表按降序排

  5. ruby - 将哈希值保存到 Ruby 上的文件 - 2

    我刚刚迈出了编程的第一步。我刚刚完成了CodeAcademy的另一门类(class)。这次我被要求创建一个小电影目录。这是我的问题:如何在文件中保存/加载带有电影标题和评级的哈希值而不是自己的代码?下面是代码现在的样子(几句葡萄牙语,但您可以忽略它:movies={Memento:3,Primer:4,Ishtar:1}puts"Oquevocêgostariadefazer?"puts"--Digite'add'paraadicionarumfilme."puts"--Digite'update'paraatualizarumfilme."puts"--Digite'display'

  6. ruby-on-rails - 如何在 Ruby on Rails 中将数组持久保存到数据库? - 2

    我正在尝试将一个数组的数组保存到我在Rails中的SQLite数据库中。现在,我有一个可以容纳这样一个数组的对象,并且实例似乎可以毫无问题地保存。但是,它显然没有保存到数据库中——当我在与创建数组的View不同的View中调用My_Object.array上的函数时,结果为nil并且不起作用。例如:classMy_Object当我调用My_Object.new(:array=>[[1,2,3],[4,5,6]])时,一切似乎都正常工作,但我不能在其他任何地方访问:array属性,结果都是nil。有什么想法吗? 最佳答案 首先在您的表

  7. ruby-on-rails - Rails 3,在RAILS_ROOT上方显示来自本地文件系统的jpg图片 - 2

    我正在尝试找出一种方法来显示来自不在RAILS_ROOT下(在RedHat或Ubuntu环境中)的已安装文件系统的图像。我不想使用符号链接(symboliclink),因为这个应用程序实际上是通过Tomcat部署的,而当我关闭Tomcat时,Tomcat会尝试跟随符号链接(symboliclink)并删除挂载中的所有图像。由于这些文件的数量和大小,将图像放在public/images下也不是一种选择。我查看了send_file,但它只会显示一张图片。我需要在一个格式良好的页面中显示6个请求的图像。由于膨胀,我宁愿不使用Base64编码,但我不知道如何将图像数据与呈现的页面一起传递下去。

  8. ruby - 根据值然后键对ruby中的哈希进行排序 - 2

    如何在ruby​​中先根据值然后根据键对散列进行排序?例如h={4=>5,2=>5,7=>1}将排序为[[7,1],[2,5],[4,5]]我可以根据值进行排序h.sort{|x,y|x[1]y[1]}但我不知道如何根据值进行排序,然后在值相同时键入 最佳答案 h.sort_by{|k,v|[v,k]}这使用了Array的事实混入Comparable并定义逐元素。注意上面等价于h.sort_by{|el|el.reverse}相当于h.sort_by(&:reverse)这可能会或可能不会更具可读性。如果你知道Hashes一般都是先

  9. ruby-on-rails - 如何在 Rails 3 中保存到数据库之前格式化值 - 2

    我有一个带有利润字段的用户模型。利润字段是DECIMAL(11,0)类型。我在表单上有一个屏蔽输入,允许用户输入1,000美元之类的内容。我想格式化该值并从中删除除数字以外的所有内容,这样我将保存1000。这是我到目前为止所拥有的:classUser但它一直在数据库中保存0。看起来它在我的格式化函数之前将其转换为十进制。 最佳答案 试试这个:defprofit=(new_profit)self[:profit]=new_profit.gsub(/[^0-9]/,'')end 关于ruby

  10. ruby-on-rails - ActiveRecord 验证失败后如何将内容保存到数据库? - 2

    基本上我想要做的是在MyModelLog表中记录对MyModel的操作。这是一些伪代码:classMyModel我也有一个看起来像这样的模型:classMyModelLog"somethinghappened")endend为了记录我尝试:在MyModel的something方法中添加MyModelLog.log_something在MyModel的after_validation回调上调用MyModelLog.log_something在这两种情况下,创建都会在验证失败时回滚,因为它在验证事务中。当然我也想在验证失败时记录。我真的不想登录文件或数据库以外的其他地方,因为我需要日志条目

随机推荐