122_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（五）上架商品JS实现

好，我们这一部分已经弄完之后，接下来大家就会看到我们除了这个HTML页面呢，我们是不是就要还有对应的JS要去实现，对吧？所以我们接下来要做的就是我们希望。首先大家会想到我们会处理一个这个这个点击事件，对不对？这个点击事件我们一定要响应到它，然后调用一个函数，我们就会去做，把文件上传到，把图像上传到IPFS，拿到哈希，然后我们把所有的这里边涉及到的这些东西拿出来，然后存到我们渠道链上，简单说就是这么几步啊，听起来还是挺简单的，对吧？好，那么我们接下来就在这个JS里边，我们来实现一下，好，大家能够想到我们的GS是不是还是在这个index JS里边。啊，所以呃，大家能想到我们应该是在哪里去实现吗？

是不是应该还是在这个window.app里边啊，这个start里边，对吧，一开始我们就应该把它对应的那些，就是需要去做监听和需要去做这个事件绑定的这些函数，就应该给他直接写在这个里面，比如说比如说什么呢，我们这里边是不是就可以。Dollar。这块的写法对吧，我们就应该拿到，呃，像我们这一个就是submit这个这个按钮的一个事事件对不对，那大家还记得那个submit按钮它的ID叫什么吗？我们看一下是list对吧。Submit，它的ID就叫做。诶，这里没有ID啊，啊，这里我们submit的时候对应的就是要提交这个表单对不对，所以我们应该是直接去。

处理这个表单的属性对吧？所以我们要用到的ID就是这个ADD item to store。好，那把它拿出来。ADD item to store ther拿到这样的，这就是我们的这一个表单，对不对，那么后边可以点submit它的这个时间。相当于我们就要注册一个这个整个这个表单，它的sum事件，如果我们点击了之后就会掉到这里来，对吧，好，那么。点击了之后会出现什么事情呢？就会有一个事件作为一个回调传进来对吧？好，那么大家看一下这里我们的处理啊，这里我们要做的处理稍微有一点复杂，比方说我们先定义一个胖拿到拿到我们当前提交表单的信息，首先我们得拿到这个东西，对吧？首先我们是Dollar。

ADD item to stop。To store首先我们要拿到它的它的完整的这个数据，它完整的数据是什么呢？一个form表单，它有一个属性，可以用S。Lines，这就是序列化的这个属性对不对？我们调用它的序列化这个函数，就可以直接拿到它序列化之后的所有的参数。就保存在这个rap这个参数里边来啊，这里我们的定义跟课件上应该是一样的，对吧，课件上应该也是rap。呃，在在下面这里啊，这个rap对吧，好，那接下来我们再看，拿到了这样一个东西之后，我们。

大家注意啊，这个拿到的东西我们还不能直接用。为什么不能直接用呢？啊，比如说我们这里这样啊，Pencil点，我们先给大家看一眼，假如说我们把这个打印出来给大家看一眼啊。好啊，当然这个我这边还得还得去重新这个启动我们这里的这个服务器，那我们就先把这句先写上，等一下启动之后给大家看为什么要这么做吧，对吧，我们先实现，然后之后再给大家看为什么这么做好，然后接下来我们要做的是什么呢？是把这个rap做一个解析，因为它这个序列化之后。大家要注意啊，我们直接把表单做序列化之后，他得到的那一个字符串。是一个编码之后的字符串，什么方式编码呢？大家可能听说过，就是所谓的这个uri。

我们在整个的这个网络当中，资源做统一定位的时候呢，有一些字符是要被特殊的一些编码形式替换掉的，比如说空格，那我们在提交的时候，其实是不能直接敲空格的，因为你如果在网络当中发送的时候，你直接发空格，有一些路由器，有一些这些服务器，它接收到这样的网络信息的时候，有可能会认为你要做的是其他的一些操作。所以在传递这些字符的时候，就需要把它比方说编码成2%B，这个空格应该就是2%B对吧？大是不是有时候见过这个，在在那个URL里边见过这样的字符串，对吧？那这些东西是什么呢？就是所谓的UI的一个编码形式，所以我们在这里要做的一项是我们要把它里边编码之后的东西真正的解析出来，放到我们这里的这个params里边，那么他怎么样去做解析的，我们是要做一个Jason pass。

就是把它从一个字符串里边。转成我们的JS Jason对象对吧，转换成一个Jason对象，但是里边的这个东西呢，它本身不是一个能够直接转换的这些对象，我们还要把它里边编码之后的那些东西先做一个转换解码，先做一个解码对吧？好，那么我们怎么样做这个解法呢？大家可以我们直接先把这个先复制过来吧，因为这个有点复杂啊。我们先把这个复制过来。然后我们给大家一点一点解释，好，大家可以看一下这一串东西啊，这一串东西好长啊，对吧？这是在干什么事情呢？首先它其实里边就是一个字符串拼接对不对？大家看到对吧？前面这个单引号引起来的是一个字符串，然后后边啊rank什么，这又是字符串对吧？点replace.replace呃，这个我们不管都想像它是一个字符串，然后后边又加上一个字符串，所以大家看前后其实加的是什么呢？其实就是加了一个大括号，然后又加上双引号把它引起来对不对啊，所以其实就是把我们中间的这个字符串大括号括起来引起来，那相当于就是要变成我们一个Jason对象对吧？这样的一个模式，那大家注意看，里边这个是什么呢？是要把rap，我们前面拿到它这个序列化之后的编码结果做一个转换，怎么转换呢？Replace。

JS里边的replace这个命令，它其实就是替代的意思对吧，所以它其实就是要把后面这里可以给一个正则表达，它就是要把这里边定义的这一个字符替代成后面定义的字符。那这里这个字符是什么意思呢？大家注意啊，不是说要把这一串全部替代，这个斜线是一个分隔符，所以这样的分隔之后，它要替换的就是这里的双引号。

然后后边这个G是什么意思，全局对吧？Globe，所以是全局替换，把这个双引号替换，替换成什么样的东西呢？替换成后边这个单引号里边引着的东西，两个反斜杠，然后双引号，这是什么意思呢？对，反斜杠是转义字符对吧，转义的斜法，所以两个反斜杠其实代表的是一个反斜杠对不对啊，这个大家知道啊，加反斜杠之后就转移，那本身就是反斜杠，它应该怎么转移呢？那就是反斜杠，反斜杠就代表一个反斜杠对吧？所以它其实想要的效果是什么？就是要把这个一个双引号转换成反斜杠双引号啊，所以它这个是大家可以想象它是为了什么呢？为了把我们之前这个里边如果要有引号带引号的这种状况的话。

把它再加一重转义字符，然后变成我们可以嵌套可以解析出来的东西，对吧？所以这是我们Jason pass要求的一个一个东西啊，当然在这个例子里边，其实我们平常可能用不到啊，然后我们看后边吧，后边就比较好理解了，后边是什么呢？是把这个与这个符号，且这个符号全局替换，替换成什么呢？替换成双引号中间的逗号啊，这是什么意思呢？大家其实能够想到，呃，大家大家之前就是上网的时候看打开一些这个链接的时候，应该也见过啊哦，我们这里有没有哎，大家会看到我们这里后边跟着的这一串东西，是不是中间有这个与这个符号，嗯，与这个符号表示什么？对，这就是表示它这个页面里边带着的参数，然后互相之间所有参数之间的连接用语号连接对不对？所以大家看到前面这个叫做optimize等于true，这是一个参数，后边是version等于这个什么solid Jason，什么0.4.24对吧？所以大家看到这是两个参数中间连接用于，那我们在Jason里边不是对吧？两个参数之间我们不是用语的，我们逗号分割对不对？所以要把它用逗号分割开，大家会想到为什么还要加引号呢？因为我们Jason里边每个字段都是。

都是引号对吧？所以大家能够想象得到这个引号是是不是跟着前面这个号来做的对吧？是要跟前面这个引号搭的，然后逗号是分隔符，后边这个引号呢，你再跟后边去搭，对吧？是这样的一个逻辑，好，那接下来大家看又有一个replace，这是要把什么呢？把等号替换成冒号，就是引号冒号引号对不对？那大家就想象到我们在这里是不是有等号啊，每一个参数在对指明它是什么值的时候都是用的等号，而我们Jason里边不是用等号的，Jason是冒号对不对？一个K，一个value，所以说这个大家就想清楚了，对吧？这里就是把它转换成我们Jason的这种表达形式，所以我们这里是要把它转换成冒号，同样还是有引号，引住，最后大括号不写啊，稍微有点复杂，有点绕，但是大家就是去仔细的分析分析，跟着过一遍。

遍就知道了啊好，那接下来我们已经拿到了所有的这些，那这这里我们也直接把它打出来啊，到时候大家一看，我们运行的时候一看，大家就知道它到底是什么东西了，Paramsms好，接下来我们已经拿到了当前所有的这是这是什么东西啊，这是我们提交起来的这个所有参数，对不对，也就是说大家应该能够想到这个pers里边它的它的值应该是什么东西呢？

这是一个大对象。里边就应该是name是什么东西对吧？Category是什么东西，然后什么start price是什么东西，就是我们定义好的那些东西对吧？好，那接下来我们是不是就要一个一个去处理了啊，那大家就会想到它既然是一个大的对象，我们要做挨个处理的时候，是不是我们还应该啊，大家注意啊，我们这个时候拿出来的东西还是。就是编码之后的东西呢，我们只把这个与号等号这些连接符做了替换。像我们前面说到的，像空格啊，像冒号啊，其他的一些东西其实都没有做过替换，对不对？而我们事实上在提交这个HTMHTTP表单的时候，事实上是。会做UI的编码的，所以我们之后还得做做解码的这个环节，大家就会想到要解码的话，呃，那我们是不是得把每一个都拿出来挨个遍历一遍去解码呀。

对吧？因为我们直接替换这个是不行的，所以我们只有把这个每一个都拿出来做一个解码好。那么便利的时候用什么方法，大家之前其实也见到过，就是object.kids是不是就可以直接把它所有的键拿出来paragrams，然后我们可以for each，对吧？这就是标准的便利一个对象里边所有键值的一个方法，那么for each的时候，我们可以直接比方说呃，For each k对吧，我们定义一个K。然后就在里边可以直接访问他了，那么大家就会发现，呃，我们在这里可能需要把解析出来的东西还做一个做一个保存。

呃，所以大家会想到我们可能还需要定义一些，就是别的一些变量，我们看一下这边我们的课件里边是怎么定义的啊。呃，大家会发现，你看它定义了一个这个decoded paragraphms，所以说这里又定义了一个东西，这就是要保存我们解码之后的东西，对吧？好，我们也学着这个方法来做吧。然后我们呃，Let一个的先让它等于空，然后我们这里就一个一个解出来，就给它赋值了，对吧，那每一个是什么呢？它的K是不是还应该一样对吧？K这个应该是没有什么问题的啊，不会去有其他的一些东西，然后我们要做的是把。大家可以看到啊，这里直接就会提示有这样的方法对不对，JS里面本身就有这样的方法，关键字deco decode uri component，所以它就会把我们整个的这个呃，U的这个结构做一个解码。

好，这个具体是什么，到时候我们把前面这两个不是打印出来嘛，到时候给大家看一眼，大家就知道了，好，那里边我们可能还要再做一重，就是做这个抵扣的uri，这个就是做两重解码，保证它每一个东西都解出来啊，其实事实上就是我觉得我们课件里面做了两层解码，事实上我觉得就是直接这个deco的uri component应该也就够了啊，就是它其实是包含了这个decode uri的这种解码方式，好那么我们这里要。要放进来的那就应该是pers，它里边的K对不对，对应的那个元素做解码，解完码之后放到这个里边来，对吧？然后我们遍历一遍这个decoed parents parents是不是存着的，就是我们完全解码之后的这些对象了。

JS对象对吧？所以这是我们电力这个过程把它做解码的过程啊，这个表单你看处理还是挺复杂的，大家如果要是用一些框架的话，可能就就不用这么复杂的去处理，对吧？但是我觉得大家还是需要把这个底层的东西多做一些了解，去去搞清楚它的这个原理的，好，那接下来我们已经拿到这个所有的参数之后啊，那其实大家就可以想到，我们其实就就直接把它存了不就完了吗？那接下来可能要做的事情比较多，那我们还是包装一层吧，这里给的这个名字叫什么？就叫save product product对吧？我们把它做一个save product要传入的是什么东西呢？大家可能会想到，那肯定就是decoded the paragraph，肯定这个事情传进去的，对吧？

啊，另外大家注意，我们这里边可能还缺了什么东西呢。大家要注意啊，我们当时定义的这个所有的这些文件里边，除了这些基本的给定的这些值之外，还有这里需要选择文件，对不对，这个选择文件可没那么容易，所以大家会想到这里，其实我们是要有别的方式去做，去做处理的，对吧？啊，这里给大家说一下，就是H5里边的这个选择文件这一块我们怎么去做。呃，这里给大家写出来啊，我们定义直接定义一个reader，就是文件的一个reader对吧，然后我们Dollar，然后这里边就去选择到我们对应的那个ID，我们对应的ID是什么呢？就是上传这个图片的那个ID对吧。是product。我们把这个复制出来。

然后跟在后面，我们要对这个对象。定义它的事件。这是我们在start里边一开始这个渲染的时候就定义出来的事件，对吧？这个元素到元素有什么事件呢？它有一个change change事件，这就有一点像我们那个有时候给他那个绑定一个UN change方法对吧？所以这就是JA query里边的change事件，这样这样的一个query可以点点change change是什么意思呢？就是说我们这里只要我们选了一个文件，上传了一个文件，它这个change就会执行一遍，对吧？所以他就会不停的这个随着我们的更改，然后去啊更新它的这个内容，那更新的时候我们要做什么呢？大家肯定就会想到了，我们是不是要把那个文件内容读出来，保存到这个reader里面啊，对，然后这个东西是我们真正到时候要去用的东西，而我们这个提交表单的这个内容，其实是不可能直接拿到我们这个文件里面所有的东西的，对吧，所以我们是要在这种里面去做处理的，好那么这里边我们就同样定义一个event。

触发他这个object change事件的时候，我们怎么样去做呢？我们定义我们cons吧，还是定义一个file，让这个file就等于event.target.files0，这个是H5去，就是H5里边。一个type等于file类型的input，它读取这个就是上传文件的一个固定的写法，呃，大家可以看到就是这个它返回的on事件，返回的这个这个事件对吧？这个我们定义一个回调，这个回调里边这个事件里面它就有一个target，也就是说我们选择到那个文件对不对，而且我们可以上传一组文件对不对？呃，大家可以想象的到，我们当时选择那个文件的时候，有时候是可以选择一组的，所以它返回的是一个文件数组，这里面我们其实就是选择单一的文件，所以说我们直接把这个FILES0返回就可以了，这就是我们刚才上传的这个文件，我们定义了一个文件对象指向它，大家知道我们真正如果要用的这个东西，肯定不可能是文件对象对吧，这是一个GS对象，我们真正要用的是不是应该是里边就是真正的那个。

二进制的那些字符啊，而我们一般处理文件的时候，大家可能知道一般会去定义一个buff分，对吧？对，去一个一个把它读取出来，读到一个缓存里面，然后一起去写好，那么再看一下这个写法，这个就是写出来之后大家熟悉一下就可以了，我们首先定义一个reader叫做。呃呃，这个就是把把前面我们定义的这个reader先把它初始化一下，对吧？呃，这个初始化的时候需要什么，什么样的初始化呢？File里边window里边有一个全局的对象，叫做file reader。

这就是专门用来读取文件的一个一个方法，对吧，读取当前文件，我们之前好像也用过，就是呃，Fair reader。I think对吧，好像好像用过这样的一个一个方法，我们现在是这个相当于就是一个同步读取的一个方法，直接把它读出来就可以了，好，那么接下来我们就会想到就可以直接把reader里边我们可read as这个方法叫什么来着？应该在上面啊，看一眼。Read as a read buff对吧，大家可以看到，就是我们调用这个方法就可以把我们这个文件。对象直接读取到我们的这个buffer里边来，然后作为这个二进制字符读到buffer里边来，对吧？所以read as a RA buffer，所以它是一个，呃，就相当于是读成了字节的数组，对不对，RA buffer。

传入这个file，好，所以大家会发现这样的话，我们就实现了这个图片的读取，图片文件的读取，把它作为这个a buffer读进来，那我们在save product的时候，除了这个decoded para之后之外，是不是大家能想到还应该有这个reader啊，对吧？所以我们把这两个参数传进去，就可以实现我们的保存这个产品信息的这个需求。