七牛web端云存储第二势

上面一节写了文件的上传，这一节写命名问题

这里假设我们上传的文件是图片。

这里自动生成token

但上面的链接生成token前要注意key表单的输入值。

我这里的key输入的是“haha”，这种输入是不好的，而且很容易出错，一定要记得加后缀扩展名，后来我改成了“haha.jpg”重新生成了token。

token生成之后复制到json文件中。然后继续去修改main.js中的内容

在main.js文件中找到下面这段代码

   ,
                'Key': function(up, file) {
                     var key = "";
                     var ext = Qiniu.getFileExtension(file.name);
                     key="haha."+ext;
                     // do something with key
                     return key
                 }

它原本是被注释了的，把它恢复即可。ext是文件的扩展名，可以看到我已经将key的值改为“haha.”+ext了，这里需要注意的是haha后面有个点不能丢了。笔者已经
踩过坑了。

如果你按照我的方法去做的话，现在运行然后上传一个后缀格式为jpg的图片，就可以在七牛的后台看到这张文件名被命名成haha.jpg的图片了，这里千万不要上传png的图片，除非你生成token前表单中填的是haha.png！

上传图片后你会发现f12的console仍然有报错，是default.png的图片没找到的错，这是因为官方给的demo中这个图片的路径存放的问题，调整好后就会看到下图情况

大家疑惑了，为什么不显示我的图片呢？这个问题解决起来很简单，但会者不难难者不会啊，尤其是对像笔者这样的小白来说，真是各种草泥马。不废话了，就是上一节提到的那两行关键代码！

<input type="hidden" id="domain" value="<%= domain %>">

这里的value值一开始笔者也不知道该怎么填，看官网的demo中填的是一个qiniu官网的url地址。仔细思考一下，这应该是图片上传的七牛的我们用户空间，然后在从那里返回回来才能看见图片的！对，就是下图中打了马赛克的这个七牛分配给我们的链接

至此，再上传一张jpg图片就没有任何问题了。

上一节和这一节，总共需要改动的地方就是index.html的两行代码的value值，main.js中的key，还有生成token的那个key这三个关键的地方！

参考博客：七牛云存储的 Javascript Web 前端文件上传