接入第三方平台：文件上传与图片预览的完整指导_c# form-data上传图片到第三方接口-优快云博客

本文链接：https://blog.youkuaiyun.com/yfmsx/article/details/144266151

引言

在现代Web应用中，文件上传功能是一个常见需求，无论是用户上传头像、文档还是其他类型的文件。掌握如何实现文件上传和图片预览，不仅能提升用户体验，还能增强应用程序的功能性。本文将详细介绍如何在前端创建文件上传表单控件、实现图片文件预览，以及如何在服务器端处理上传的文件，同时指出新手常见的坑，帮助你在实现这一功能时更轻松。

文件上传表单控件

在HTML中，可以使用<input>标签创建文件上传控件。我们将使用enctype="multipart/form-data"属性将文件较大容量地发送到服务器。

示例代码

以下是一个简单的文件上传表单示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
    <script>
        function previewImage(event) {
            const image = document.getElementById('image');
            image.src = URL.createObjectURL(event.target.files[0]);
            image.onload = function() {
                URL.revokeObjectURL(image.src);  // 释放内存
            }
        }
    </script>
</head>
<body>
    <h1>上传文件</h1>
    <form id="uploadForm" method="post" action="/upload" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*" onchange="previewImage(event)">
        <br>
        <img id="image" src="#" alt="Image Preview" style="display:none; width: 200px; height: auto;" />
    </form>
</body>
</html>

在这个示例中，用户选择文件后，将通过JavaScript函数previewImage展示文件的预览。

服务器端如何处理上传的文件

接下来，我们将在服务器端处理上传的文件。以Flask为例，实现文件上传功能的基本步骤如下：

1. 安装Flask

如果尚未安装Flask，可以使用以下命令安装：

pip install Flask

2. 创建Flask应用

以下是处理文件上传的Flask应用示例：

from flask import Flask, request, render_template
import os

app = Flask(__name__)

# 设置文件上传的文件夹
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 确保uploads文件夹存在
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

@app.route('/')
def index():
    return render_template('upload.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return "没有文件被上传"
        
    file = request.files['file']
    if file.filename == '':
        return "没有选择文件"

    # 保存文件
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
    return f"文件上传成功，文件名: {file.filename}"

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