xblock实现文件上传功能

Open edX
#1

各位大神，第一次尝试在讨论区发表，还希望得到各位的帮助。
以下是我想实现的功能，
在xblock中有上传按钮，可将文件暂时上传到本地或内存中，然后在后台实现将文件上传至远端的fastdfs平台，fastdfds将返回一串json串，其中包含文件所在地址，然后将文件地址返回到控件中，图片类似于下面这样子的：

火狐截图_2015-12-30T09-13-07.987Z.png1449×512 34.9 KB

选择文件，点击upload之后 经后后台解析将文件地址返回到src控件中。
实现的步骤为：
1.在html中，添加以下form

**问题1**：action中怎么填才能将关联到后台python代码？需要在url.py文件中添加什么处理吗？

2.在js中添加
$(element).find(‘input[name=uploadvideo]’).bind(‘click’, function() {
});
debug过，这里好像走不到，不知道为什么？

3.在py文件中添加上传代码。

#2

其实不太理解xblock的url机制是怎样的

#3

这个具体的功能我还没有开发过。
建议读一读
http://edx.readthedocs.org/projects/edx-developer-guide/en/latest/
http://edx.readthedocs.org/projects/xblock-tutorial/en/latest//

你还可以找找github上面的xblocklist来看看有没有类似的

#4

嗯嗯 感谢！ 目前在看js中能否直接实现，主要对fastdfs了解也比较少:slightly_smiling:

#5

我想你这个问题应该是需要拆解成四个问题:

  1. 如何在xblock中添加上传功能的响应方法，是否需要修改url.py添加路径映射还是？

这个问题比较简单，xblock手册就有说明: @XBlock.json_handler添加相应函数就可以，在JS中请求此url的方法更简单:

    var handlerUrl = runtime.handlerUrl(element, 'student_submit');

这样就可以取到之前 @XBlock.json_handler 定义的方法了。

  1. js中写的选择器，添加click事件无法执行，如何修改？

这个问题有三个要点:

  • xblock在加载javascript资源时需要指定入口方法(此方法有点儿像$(document).ready()方法。
  • 选择器这类事件绑定方法需要写到入口方法中注册，否则不生效。
  • xblock在页面中也是同时存在好多个，所以建议入口函数或者选择器的写法要有变通, 像这样:
function SubjectiveEditBlock_${xblock_id}(runtime, element){
   // 绑定提交按钮事件
   $("#${xblock_id} button[name=submit]").bind('click', function(){
  1. 如上实现上传功能？

实现上传功能其实这里就是异步上传的事儿，这里实现思路有两个:

  1. 将要上传的文件转base64字符方式上传， @XBlock.json_handler 定义的方法中将其另存为文件，这种方法我之前实现时遇到一个问题: 就是base64编码的js实现跟python实现不一致，导致加解密失败的问题，具体参考我的博文: python和javascript共用的base64加解密代码。
  2. html5已经支持自定义XMLHttpRequest对象的方式来实现异步上传了，网上资料很多，请自行百度。
  1. 如何将文件上传到fastdfs中

我用fastdfs的机会也不多，目前大都使用第三方的云存储服务了，自己搭建分布式存储服务的机会毕竟很少。
我之前实现fastdfs上传都是分两步:
1.先将文件上传到服务器的临时文件夹或者指定目录。
2.调用fastdfs的api将其上传到fastdfs服务中，将fastdfs返回的组，路径之类的信息存到数据库中保存起来。
这方面的资料也很多，请自行百度。

另外，我建议，一般的课程相关的资料上传，我建议直接上传到mongodb中(当然几百M或者上G的资料另讲)，mongodb自身就支持分布式，简单，省事儿。而且如此上传上来之后，只要将key的命名规则跟课程相符，这些上传的资料还可以在CMS中管理。

最后，祝你成功~

#6

谢谢楼上大神正准备开始做！

Powered by eduStack & ifLab