【测开中台教程-22】资源上传功能后台设计

上节课我们对上传的资源前端页面功能进行了实现，大体如下：

先看看之前的设计：

点击上传按钮，出现对话框，让你选择本地文件，选完后其实已经自动上传给服务器存储了。然后钩子会偷偷把文件名记录到前端页面上，你自己在资源输入框输入的资源名称，点击添加按钮后，其实是把前端的文件名和你输入的资源名称，同时传递给后台，让后台做一个绑定，并且一起存放到数据库里。

等到查看资源库列表的时候，最左侧展示的其实是数据库中这个资源名称，也就是你手动输入的这个，而非文件本来的名字（当然，可以加上展示）。当你点击下载后，系统会根据这个文件名去搜索资源并下载。

到此，流程结束。

前端vue组件中，我们额外引入下这个小提示层：

然后就是实现，前端调用的俩个接口分别是：

上传文件：upload_zy

名称绑定：add_zy

我们先去实现第一个，上传文件的接口，

urls.py中按如下开发：

然后就是后端views.py的俩个函数了：

上传文件函数，获取前端文件，然后加上特殊前缀路径，再分段写入即可。

绑定资源名称到数据库函数：

注意：这里涉及到同名文件的默认替换，那数据库中的资源名称替换的问题。也就是说，如果上传的是新的文件，那就创建一条记录。如果是旧文件，那就替换文件，并更新资源名称。

此时我们还需要处理一个问题，就是数据库一开始我们设计的时候只有一个name字段：

而经过我们后面的设计，显然这个字段已经不够了，于是需要改成如下这样：

然后更新命令：这两句只要之后修改models.py的结构而非函数，就要重新输入执行一次哦~ 以后不用我每次都截图了，大家熟记这两句命令吧~

最后看看函数：

现在让我们测试一下：

先点击上传，选一个本地资源，然后输入描述性的资源名称。

点击添加按钮：

文件夹内也确实出现了：

然后我们把前端样式增加一个文件原名：

看看最终效果：

再试试，同样文件，换个资源名称描述：

可以看到，已经更新成功了：

再测试多添加几个不同的资源：

此时发现了个优化问题，多次连续上传的时候，没有清理前一次的记录，那前端代码加上这个就好：（不加也不影响，因为会替换）

还有个优化问题，就是一次性上传多资源没有限制，这样会引发比较大的问题：

所以加上限制：

如果手滑选错了，需要更换文件，鼠标放上去就有小xx，点击就可以啦~

最后结果就这样了：