微信扫码把手机文件上传到电脑

Question

模拟草料二维码文件传输小工具(https://2w.ma/)，使用asp.net core mvc写一个程序显示二维码，微信扫码后在手机端弹出选择文件的界面，并且选中文件后将文件作为下载链接添加到电脑端浏览器下载列表，当用户点击浏览器下载列表的文件时就可以下载下来,请问怎样实现这一功能

Answer 1

引自免费微信小程序：皆我百晓生

要实现微信扫码上传文件到电脑的功能，可以分为几个步骤：生成二维码、处理微信扫码后的请求、接收文件并提供下载链接。下面将详细说明如何使用ASP.NET Core MVC来完成这一过程。

第一步：生成二维码

首先，你需要在你的ASP.NET Core MVC应用中生成一个二维码，这个二维码将包含一个URL，用于接收文件。可以使用ZXing.Net库来生成二维码。

安装ZXing.Net库

在项目中安装ZXing.Net库：

dotnet add package ZXing.Net

生成二维码

public IActionResult GetQRCode()
{
    var writer = new BarcodeWriter();
    writer.Format = BarcodeFormat.QR_CODE;
    string content = Url.Action("UploadFile", "Home");
    writer.Options = new EncodingOptions { Width = 300, Height = 300 };
    
    var barcodeBitmap = writer.Write(content);
    using (var ms = new MemoryStream())
    {
        barcodeBitmap.Save(ms, ImageFormat.Png);
        return File(ms.ToArray(), "image/png");
    }
}

第二步：处理文件上传

创建一个控制器方法来处理文件上传。这个方法应该能够接收来自微信客户端的文件，并将其保存到服务器上。

[HttpPost]
public async Task<IActionResult> UploadFile(IFormFile file)
{
    if (file != null && file.Length > 0)
    {
        // 保存文件到服务器
        string filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads", file.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }

        // 返回文件的下载链接
        string downloadUrl = Url.Content("~/uploads/" + file.FileName);
        return Ok(new { DownloadUrl = downloadUrl });
    }

    return BadRequest();
}

第三步：提供文件下载链接

在前端页面上展示二维码的同时，也需要准备一个区域来展示下载链接。当文件上传成功后，通过Ajax调用UploadFile方法，并在成功回调中更新下载链接。

<!-- 前端HTML -->
<div>
    <img src="@Url.Action("GetQRCode")" />
    <p>Scan the QR code to upload a file from your phone.</p>
</div>

<div id="downloadLinks">
    <!-- 下载链接将在这里动态生成 -->
</div>

<!-- 使用jQuery处理Ajax请求 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("UploadFile", "Home")",
            type: "POST",
            // 这里需要根据实际情况设置FormData和XHR的配置
            success: function (data) {
                $('#downloadLinks').append('<a href="' + data.DownloadUrl + '">Download</a>');
            },
            error: function () {
                alert('Failed to upload file.');
            }
        });
    });
</script>

注意：实际应用中，上述Ajax示例代码中的配置（如FormData的设置）需要根据具体需求调整，因为默认情况下，Ajax的POST请求不会自动携带文件数据。

以上步骤提供了一个基本框架，用于实现从手机通过微信扫码上传文件到电脑，并在电脑端提供下载链接的功能。具体实现细节可能需要根据你的具体需求进行适当调整。