Flask系列：几行代码轻松实现图片点击、黏贴、拖拽上传和预览

alitrack 2021-12-31

1963

Dropzone 是一个简单的 JavaScript 库，可帮助您向 Web 表单添加文件拖放功能。它是网络上最受欢迎的拖放库之一，被数百万人使用。

有很多配置选项，因此 Dropzone 可以用于各种情况。

Dropzone 的一些亮点是：

界面漂亮
图像缩略图预览。只需注册回调 thumbnail(file, data)
并在您喜欢的任何地方显示图像
进度条
支持瑞纳屏（Retina）
多个文件和同步上传
支持大文件
分块上传（单个文件可以在多个 HTTP 请求中分块上传）
完整的主题。Dropzone 的外观和感觉只是默认的主题。你可以通过重写默认的事件监听器来定义所有内容。
浏览器图像大小调整（在将图像上传到您的服务器之前）
经过良好测试

本文只是通过一个简单的 Flask 应用来展示 Dropzone 的强大和简单，顺便增加了黏贴的支持。

废话不多说，直接上代码。

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dropzone Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
  <style>
    .dropzone {
      border: 2px dashed #0087F7;
      margin: 10%;
      min-height: 400px;
    }
  </style>
</head>
<body>
  <div id="myDropzone" class="dropzone"></div>
  <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
  <script>
   // Dropzone 选项配置
    Dropzone.options.myDropzone = {
      init: function () {
        // redirect after queue complete
        // upload queue when button click
        // custom init code
      },
      // click upload options
      uploadMultiple: false,
      parallelUploads: 2,
      paramName: "file", // The name that will be used to transfer the file
      maxFilesize: 3, // MB
      acceptedFiles: "image/*",
      maxFiles: 30,
      dictDefaultMessage: `拖拽，点击或者黏贴上传图片`, // message display on drop area

    };
    //初始化Dropzone，绑定id为myDropzone的div， 服务端为/
    var myDropzone = new Dropzone("div#myDropzone", { url: "/"});
  </script>
</body>
<script>
//给Dropzone增加黏贴事件监控
  const target = document.querySelector('#myDropzone');
  // Handle the `paste` event
  target.addEventListener('paste', function (evt) {
    // Get the data of clipboard
    const data = evt.clipboardData.items;
    const items = [].slice.call(data).filter(function (item) {
      // Filter the image items only
      return item.type.indexOf('image') !== -1;
    });
    if (items.length === 0) {
      return;
    }
    const item = items[0];
    const file = item.getAsFile();
    myDropzone.addFile(item.getAsFile())
  });
</script>
</html>

`app.py`

import os

from flask import Flask, render_template, request
basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)

app.config.update(
    UPLOADED_PATH=os.path.join(basedir, 'uploads'),
)

@app.route('/', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        f = request.files.get('file')
        file_path = os.path.join(app.config['UPLOADED_PATH'], f.filename)
        f.save(file_path)
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)