使用openresty的lua-resty-upload实现文件上传

发表于   |   分类于 左手代码 OpenResty   |   阅读(5708)   |   评论(0)

一、实现方式

1、前端：前端使用jquery+webuploader来实现图片上传和预览

使用webuploader来实现模拟表单上传，将上传请求发给服务端，待服务端上传处理完成后将处理结果显示在页面上

2、服务端：使用openresty的lua-resty-upload模块来实现文件上传

接受前端的上传请求，将处理好的图片保存起来，将图片地址返回给前端

二、项目目录结构

  • 2016为图片上传目录
  • conf为nginx.conf配置文件目录
  • html为前端文件目录(包括js和css等)
  • logs为日志目录
  • upload.lua为处理上传的lua代码

三、实现细节：

1、前端

前端使用jquery+webuploader来实现图片上传和预览

(1)、html代码：

要加载jquery库文件和webuploader文件

  1. <div id="wrapper">
  2.     <div class="page-body">
  3.         <div id="post-container" class="container">
  4.             <div class="page-container">
  5.                 <h1 id="demo">Demo</h1>
  6.                 <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>
  7.                 <div id="uploader" class="wu-example">
  8.                     <div class="queueList">
  9.                         <div id="dndArea" class="placeholder">
  10.                             <div id="filePicker"><!--按钮位置--></div>
  11.                             <p>或将照片拖到这里，单次最多可选300张</p>
  12.                         </div>
  13.                     </div>   
  14.                 </div>
  17.                 <div id="fileList">
  18.                     <!--图片展示位置-->    
  19.                 </div>
  20.             </div>
  21.         </div> 
  22.     </div>
  23. </div>
(2)、js代码
  1. // 初始化Web Uploader
  2.         var uploader = WebUploader.create({
  4.             // 选完文件后，是否自动上传。
  5.             auto: true,
  7.             // swf文件路径
  8.             swf: '/webuplader/images/Uploader.swf',
  10.             // 文件接收服务端。
  11.             server: '/upload',
  13.             // 选择文件的按钮。可选。
  14.             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  15.             pick: {
  16.                 id: '#filePicker',
  17.                 label: '点击选择图片'
  18.             },
  19.             dnd: '#uploader .queueList',
  20.             paste: document.body,
  22.             // 只允许选择图片文件。
  23.             accept: {
  24.                 title: 'Images',
  25.                 extensions: 'gif,jpg,jpeg,bmp,png',
  26.                 mimeTypes: 'image/*'
  27.             }
  29.         });
  31.         uploader.on( 'uploadAccept', function( file, response ) {
  32.             console.log(response)
  33.             if (typeof response != 'undefined' && typeof response.code != 'undefined') {
  34.                 if (response.code == 200) {
  35.                     $('#fileList').append('<img src="http://openfile.shixinke.com/images/posts/2016/05/span>+response.imgurl+'">');
  36.                 } else {
  37.                     alert(response.msg)
  38.                 }
  39.             } else {
  40.                 console.log(response);
  41.             }
  42.         });
  45.         uploader.on( 'uploadError', function( file ) {
  46.             $( '#'+file.id ).find('p.state').text('上传出错');
  47.         });
  49.         uploader.on( 'uploadComplete', function( file ) {
  50.             $( '#'+file.id ).find('.progress').fadeOut();
  51.         });
2、nginx配置
  1. lua_package_path '/data/www/openrestyproject/upload/lib/?.lua;/data/www/openrestyproject/upload/?.lua;;';
  2. lua_code_cache off;
  3. server {
  4.     server_name localhost;
  5.     listen 8000;
  6.     charset utf-8;
  7.     set $UPLOAD_ROOT /data/www/openrestyproject/upload;
  8.     error_log /data/www/openrestyproject/upload/logs/error.log;
  9.     access_log /data/www/openrestyproject/upload/logs/access.log main;
  11.     location /upload {
  12.         default_type text/html;
  13.         content_by_lua_file $UPLOAD_ROOT/upload.lua;
  14.     }
  16. }
3、服务端

使用openresty的lua-resty-upload模块来实现文件上传

  1. local upload = require "resty.upload"
  2. local cjson = require "cjson"
  4. local chunk_size = 4096
  5. local form = upload:new(chunk_size)
  6. local conf = {max_size=1000000, allow_exts={'jpg', 'png', 'gif'}}
  7. local file
  8. local file_name
  10. --获取文件扩展名
  11. function get_ext(res)
  12.     local ext = 'jpg'
  13.     if res == 'image/png' then
  14.         ext = 'png'
  15.     elseif res == 'image/jpg' or res == 'image/jpeg' then
  16.         ext = 'jpg'
  17.     elseif res == 'image/gif' then
  18.         ext = 'gif'
  19.     end
  20.     return ext
  21. end
  23. --判断某个值是否在数组中
  24. function in_array(v, tab)
  25.     local i = false
  26.     for _, val in ipairs(tab) do
  27.         if val == v then
  28.             i = true
  29.             break
  30.         end
  31.     end
  32.     return i
  33. end
  35. while true do
  36.     local typ, res, err = form:read() 
  37.     if typ == "header" then
  38.         if res[1] ~= "Content-Disposition" then
  40.             local file_id = ngx.md5('upload'..os.time())
  41.             local extension = get_ext(res[2])
  43.             if not extension then
  44.                  ngx.say(cjson.encode({code=501, msg='未获取文件后缀', data=res}))
  45.                  return 
  46.             end
  48.             if not in_array(extension, conf.allow_exts) then
  49.                 ngx.say(cjson.encode({code=501, msg='不支持这种文件格式', data=res}))
  50.                 return 
  51.             end
  53.             -- 注：这个地方请将/data/www/openrestyproject/upload/换成你的项目目录
  54.             local dir = '/data/www/openrestyproject/uploadhttp://openfile.shixinke.com/images/posts/2016/05/span>..os.date('%Y')..'http://openfile.shixinke.com/images/posts/2016/05/span>..os.date('%m')..'http://openfile.shixinke.com/images/posts/2016/05/span>..os.date('%d')..'http://openfile.shixinke.com/images/posts/2016/05/span>   
  55.             local status = os.execute('mkdir -p '..dir)
  56.             if status ~= 0 then
  57.                 ngx.say(cjson.encode({code=501, msg='创建目录失败'}))
  58.                 return
  59.             end  
  60.             file_name = dir..file_id.."."..extension          
  61.             if file_name then
  62.                 file = io.open(file_name, "w+")
  63.                 if not file then
  64.                     ngx.say(cjson.encode({code=500, msg='failed to open file',imgurl=''}))
  65.                     return
  66.                 end
  67.             end
  68.         end
  69.      elseif typ == "body" then
  70.         if type(tonumber(res)) == 'number' and tonumber(res) > conf.max_size then
  71.             ngx.say(cjson.encode({code=501, msg='文件超过规定大小', data=res}))
  72.             return
  73.         end
  74.         if file then
  75.             file:write(res)            
  76.         end
  77.     elseif typ == "part_end" then
  78.         if file then
  79.             file:close()
  80.             file = nil
  81.         end
  82.     elseif typ == "eof" then
  83.         file_name = string.gsub(file_name, '/data/www/openrestyproject/uploadhttp://openfile.shixinke.com/images/posts/2016/05/span>, '') 
  84.         -- 注：这个地方请将/data/www/openrestyproject/upload/换成你的项目目录       
  85.         ngx.say(cjson.encode({code=200, msg='上传成功！',imgurl= file_name}))
  86.         break
  87.     else
  89.     end
  90. end

四、项目效果

项目源码下载地址：https://github.com/shixinke/openresty-practices/tree/master/upload

1、上传前：

2、上传后：

专题 更多...

分类 更多...

展开

标签 更多...

归档 更多...

展开