[实战] 拖拽传图 Iris + DropzoneJS

Iris官方其实很厚道，有很多有用的例子，而社区则是文档多于实战。源于官方示例库（[英文源文]）(https://github.com/kataras/iris/tree/master/_examples/tutorial/dropzonejs)，本文采用 DropzoneJS and Go实现图片上传，后端裁剪，前端呈现，代码量少但胜在实用，适合新同学实战。

涉及的点

• DropzoneJS 拖拽上传图片前端库，可显示进度
• Iris 类（理念相近）PHP 中的 Laravel 框架，但比之轻
• 相关同步，图片，文件，路径等标准库
• 第三方库 nfnt/resize，用于缩略图等比例裁剪

效果图

前端

引入的DropzoneJS库本身不依赖于jQeury，表单亦无需 enctype，本文只是用jquery向后端发数据

DOM布局

表单 file 类型节点， 要携带 multiple属性，以示多文件上传

    <form action="/upload" method="post" class="dropzone" id="my-dropzone">
        <div class="fallback">
            <input type="file" name="file" multiple/>
            <input type="submit" value="Upload">
        </div>
    </form>

DropzoneJS

addedfile 事件，使用回调数据，其添加到对应的文件对象上去; complete 事件，显示进度条

    Dropzone.options.myDropzone ={
        paramName:"file",
        init:function(){
            thisDropzone = this;
            $.get('/uploads',function(data){
                if(data==null){
                    return
                }
                $.each(data,function(key,value){
                    var mockFile = {name:value.name,size:value.size}
                    thisDropzone.emit("addedfile", mockFile)
                    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, '/public/uploads/thumbnail_'+value.name)
                    // 进度条
                    thisDropzone.emit("complete", mockFile)
                })
            })
        }
    }

后端

项目目录结构如下

│  main.go
├─public
│  ├─css
│  │      dropzone.css
│  ├─js
│  │      dropzone.js
│  └─uploads
│          kk048.jpg
│          ll031.jpg
│          thumbnail_kk048.jpg
│          thumbnail_ll031.jpg
│          thumbnail_web_spring.png
│          web_spring.png
└─views
        upload.html

数据

文件标签结构体方便前端接收json格式的文件名及大小的信息

const uploadsDir = "./public/uploads/"
type uploadedFile struct {
    // {name: "", size: } 适应dropzone所需
    Name string `json:"name"`
    Size int64  `json:"size"`
}
type uploadedFiles struct {
    dir   string  // 文件存储目录
    items []uploadedFile // 多文件数据记录进切片
    mu    sync.RWMutex // 安全类型的切片锁
}

操作集

对 *uploadedFiles类型的创建及其方法

// 获取多文件实例
func scanUploads(dir string) *uploadedFiles {
    f := new(uploadedFiles)
    index := dir[len(dir)-1]
    if index != os.PathSeparator && index != '/' {
        dir += string(os.PathSeparator)
    }
    // 递归创建文件夹
    if err := os.MkdirAll(dir, os.FileMode(0666)); err != nil {
        return f
    }
    f.scan(dir)
    return f
}

func (f *uploadedFiles) scan(dir string) {
    f.dir = dir
    // 根目录递归分析，得到图片文件信息
    filepath.Walk(dir, func(path string, info os.FileInfo, err error) error {
     // 排除目录及缩略图
        if info.IsDir() || strings.HasPrefix(info.Name(), "thumbnail_") {
            return nil
        }
        // 添加非缩略图文件
        f.add(info.Name(), info.Size())
        return nil
    })
}
// 添加文件信息
func (f *uploadedFiles) add(name string, size int64) uploadedFile {
    uf := uploadedFile{
        Name: name,
        Size: size,
    }
    f.mu.Lock()
    f.items = append(f.items, uf)
    f.mu.Unlock()
    return uf
}
// 创建缩略图
func (f *uploadedFiles) createThumbnail(uf uploadedFile) {
    file, err := os.Open(path.Join(f.dir, uf.Name))
    if err != nil {
        return
    }
    defer file.Close()
    name := strings.ToLower(uf.Name)
    out, err := os.OpenFile(f.dir+"thumbnail_"+uf.Name, os.O_WRONLY|os.O_CREATE, 0666)
    if err != nil {
        return
    }
    defer out.Close()

    // 裁剪缩略图
    if strings.HasSuffix(name, "jpg") {
        img, err := jpeg.Decode(file)
        if err != nil {
            return
        }
        resized := resize.Thumbnail(180, 180, img, resize.Lanczos3)
        // 将图像写入输出流
        jpeg.Encode(out, resized, &jpeg.Options{Quality: jpeg.DefaultQuality})
    } else if strings.HasSuffix(name, "png") {
        img, err := png.Decode(file)
        if err != nil {
            return
        }
        // 等比例缩放
        resized := resize.Thumbnail(180, 180, img, resize.Lanczos3)
        png.Encode(out, resized)
    }
}

Iris应用

好的代码会说话，上码

func main() {
    app := iris.New()
    // 注册视图引擎
    app.RegisterView(iris.HTML("./views", ".html"))
    // 发布静态资源服务
    app.HandleDir("/public", "./public")
    // 注册首页路由
    app.Get("/", func(ctx iris.Context) {
        ctx.View("upload.html")
    })

    // 扫描上传后文件信息（缩略图信息）
    files := scanUploads(uploadsDir)
    // 多图片信息api查询接口，返回json
    app.Get("/uploads", func(ctx iris.Context) {
        ctx.JSON(files.items)
    })

    // 注册Post上传
    app.Post("/upload", iris.LimitRequestBodySize(10<<20), func(ctx iris.Context) {
        // 多文件上传 ctx是一个集请求与响应的组合体
        file, info, err := ctx.FormFile("file")
        if err != nil {
            ctx.StatusCode(iris.StatusInternalServerError)
            ctx.Application().Logger().Warnf("Error while uploading: %v", err.Error())
            return
        }
        defer file.Close()
        fname := info.Filename

        out, err := os.OpenFile(uploadsDir+fname, os.O_WRONLY|os.O_CREATE, 0666)
        if err != nil {
            ctx.StatusCode(iris.StatusInternalServerError)
            ctx.Application().Logger().Warnf("Error while preparing the new file: %v", err.Error())
            return
        }
        defer out.Close()

        // 将文件上传流复制到服务器本地
        io.Copy(out, file)

        // 可选 顺序添加文件列表
        uploadedFile := files.add(fname, info.Size)
        // goroutine创建缩略图
        go files.createThumbnail(uploadedFile)
    })
    app.Run(iris.Addr("localhost:8080"))
}

参考

源代码
Iris新手指北

本作品采用《CC 协议》，转载必须注明作者和本文链接