124_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（七）上架商品模块完善

上节课我们已经讲到了，就是整个我们这个保存我们的产品信息到IPFS和到这个我们的区块链，整个这个过程其实我们已经实现的差不多了，大家会发现我们在c product里边分成了三步走，对吧，我们已经把这个图片上传到了IPFS上，然后我们把那个文本上传到IPFS上，最后把这个区块链，就是把我们整个拿到的所有的产品信息，包括两个哈希，我们叫做ID全传到这个区块链上，保存在区块链上就完了，那我们的代码里面其实已经实现了，就是。上传图片和这个把我们最后的信息都保存到区块链上，对吧，那这里我们就差一个就是保存那个文本信息了，这个就很简单啊，大家跟着跟着我再过一遍就可以了，那大家会想到我们叫的是什么来着，Save types。啊，IPFS对吧，这里边大家注意我们传进来的这个数据是什么呢？传进来的数据其实就是我们整个的那个文本对吧？啊，那这个文本我们就就叫做它的这个报。

Blog，好，那么接下来大家会发现我们要做的事情其实跟之前处理这一个。图片的时候其实是非常类似，因为它也是个promise，对吧，我们一样是要把它包起来，所不同的是什么呢？所不同的就是这里边我们要ADD的这个buffer，它的这个buffer from的时候from不同的地方，对吧？从这个lo里边把它from出来就完了，所以大家看一下啊，我们要做的是return new promise。好，这里我们是resolve resolve和reject。

好，接下来其实我们的操作都是一样的，对吧？呃，我们这个叫buffer等于。buffer.from那它应该是from什么呢？那当然就是from block对吧？啊，这里大家可以看到我们这个课件里边给大家写的是还加上了另外一个参数上面啊，还加上了另外一个参数就是UF8，就指明了它本身的这个文件的格式对不对，对吧？然后。就是从这个UTF8格式的这个文本里边读出来，然后写入到二进制的这个buffer里面去，好，那么我们这里边也照这个写给一个UTF吧，那接下来的事情就完全一样了，对吧，IPFS.i的buffer点。

同样我们拿到这样一个结果，直接就可以返回我们resolve re，零点，哈哈希对吧，那同样我们在后边如果是点赞的时候出了错，就如果说这个IP FS at，我们这个文件出了错的话，我们就直接用一个catch。把对应的出错信息拿出来，那对应的就是reject，对吧？Error，把所有的报错信息都提示出来也是可以的，大家就是直接按照我们这种方式一个一个把它实现出来就可以了，这里是consult log对吧？好，那么大家可以看到这这样我们整个的这一部分代码就已经完全写完了，我们再来回顾一下。

我们现在的这个代码大概是一个什么样的结构，对吧？现在我们看这个代码就已经有100多行了，稍微有点看起来好像有点有点数量了，对吧？那首先我们想到一开始我们这一个是定义了一些我们要引入的基本的组件，这是穿里面决定的，对吧？然后我们引入了一个叫IPFAPI的一个一个包。然后根据它我们可以定义一个IPFS的一个实例，用它就可以调用IFS里边真正的API了，对吧？点ADD我们就可以去上传文件了，然后呢，我们的主体部分是一个window的APP对象，它里边啊，另外我们还注意就是我们定义了一个呃，Event listener，对吧？我们定义了一个全局的事件监听器，它会监听整个我们页面的load事件。

然后监听完了之后做什么事情呢？主要一个就是load完了之后，先给定我们的WEB3判断出来，如果是ma mask有的话就给他，没有的话就用我们local host，然后我们就直接启动app.start所以APP这里就是我们的主方法，也是我们启动的主入口，对吧？所以所有的这些加载进来的渲染啊，还有一些监听事件的绑定，事件的绑定全部都在这个start函数里面。那start就是这样一个函数，里面我们会会去做什么事情呢？我们先set provider，就是我们对应的这个合约要set provider，对吧？这是travel决定的，然后我们就做一件事情，叫render。这就是我们要去渲染我们当前的所有的页面，对吧？啊，这个我们一开始就实现了，这个就不说今天我们做的事情是什么呢？我们是给它在渲染页面主页面之外，还去绑定了两个事件。

这两个事件是我们在整个我们又写了一个页面，对吧？是要去上架产品的，这个页面我们要写入，传入很多信息，还要上传图片，然后我们点提交，要把它整个的传到我们的啊，首先图片要传到IPS上，然后整个所有的信息要存在哈希，包括哈希对吧？图片哈希要存在我们的以太坊区块链上，那这个过程当中涉及到两个事件，一个叫做这个1IMAGE这个对象的change事件，我们需要拿到我们上传的那个图象的文件，对不对啊，这是这一部分，然后我们还有另外一个重要的事件，是整个我们form表单的submit事件。所以就是点击它的submit的时候，我们就要做对应的处理了，处理前面这一坨都是把拿到的它序列化之后的那那个字符串，我们进行解析对吧？最后一层一层解析出来，解析到我们这里边是一个decoed的paragraph，一个复杂的这些对象，一个JS对象对吧？这里已经是JS对象了，然后我们最终上传保存产品信息的时候，我们直接把它统一到这个c product函数里面，那c product函数分哪几步呢？主要就分三步走，首先把图片传到IPFS上。

拿到他的哈希，我们保存成一个ID，第二步再把我们的对应的那个详细信息文本传到IPFS上，然后拿到他的哈希存成一个ID，最后把所有的参数，包括刚才的两个哈希全部存到区块链上去啊，那当然大家会看到我们这个操作，具体每一步的操作呢，又有不同，我们往IPFS上存的过程，因为我们要用这个链式调用，对吧，所以这里的。

往IPFS上存存图片和存文本信息的两个过程，我们都是把它包装成了返回一个promise。那这个promise里边resolve，那就是IPFS这个异步调用，它成功的时候我们去调这个resolve，然后传入他的哈希，当然如果要失败的时候就reject，传入这个error，对吧？大家都已经讲过promise的话，这个就不难，那同样这个传这个文本也是一样，最后我们要做的是把它写到区块链上，那这个时候我们就要去以commerce store，然后deployed，对吧？大家熟悉的这种区块链上的调用函数，调我们的a product to store方法，把我们所有的参数都解析出来传进去。那最后可能回调我们就不需要改变什么，我只把页面上的这个就是message信息改一下就可以了，对吧？好，这就是我们今天给大家讲过的，就是主要的这些内容，当然了还包括我们这个新实现的这个list item，这个HTML，对吧，这个还还挺大的，但是其实逻辑还比较简单。

所以这些都完成之后，那么我们相当于整个产品的基本功能，把产品列出来，然后把产品能上传上去，能跟I pip IP FS交互，最后再把拿到的哈希全存到区块链上去，整个这一部分就都完成了，基本功能就都完成了，剩下的就是竞拍相关的东西了。