如何在 html 页面中上传文件，在使用 python 的 azure 函数中使用 http 触发器？答案

【问题标题】：How to upload a file in html page, using http trigger in azure functions using python?如何在 html 页面中上传文件，在使用 python 的 azure 函数中使用 http 触发器？
【发布时间】：2020-10-13 15:35:49
【问题描述】：

我想有一些方法，如何上传文件（可以是没有 php 的 html，或者一些交互式 azure 上传页面，等等），并通过我的 URL 参数我想发送参数，这将运行使用此上传文件的其余代码（我至少需要将其保存到 blob）。

我需要一个rest api，所以我选择了azure functions。

有没有办法在python中做到这一点？我在 C# 中看到了很多示例，但 python 的文档是有限的。

非常感谢！

【问题讨论】：

标签： python azure rest azure-functions

【解决方案1】：

关于这个问题，你可以使用Html Form来实现。

例如

HTML页面

<!DOCTYPE html>
<html>
  <script type="text/javascript"
 src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js">
</script>
<body>

 <form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

$(':file').on('change', function () {
  var file = this.files[0];
  console.log(file)


$(':button').on('click', function () {
  var form = new FormData()
  form.append('file',file)


    $.ajax({
    // Your server script to process the upload
    url: '<your azure function app url>',
    type: 'POST',
    crossDomain: true,
    enctype: 'multipart/form-data',
    // Form data
    data:form,

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    success :  function(data){console.log(data);},

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload

        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });

});





});



});

</script>

</body>
</html>

函数代码（上传文件到 Azure blob）

import logging
import os
import azure.functions as func
from azure.storage.blob import BlobServiceClient, BlobClient
def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')
    try:
        file=  req.files.get('file')
        logging.info(file.filename)

        connect_str="your storage account connection string"
        container="your container name"

        blob_service_client = BlobServiceClient.from_connection_string(connect_str)
        blob_client =blob_service_client.get_blob_client(container=container,blob=file.filename)
        blob_client.upload_blob(file)
    except Exception as ex:
        logging.info(ex.args)

    return func.HttpResponse(f"the file {file.filename} upload successfully")

为您的功能配置 CORS
测试

【讨论】：

非常感谢，所以我应该创建一个托管在 azure 上的网页并调用 Azure 函数？ T 尝试了类似的方法，但没有单独的网页，我只是将表单放在 Action 中，但我读过我不应该以这种方式使用 azure 函数 :)))) 我正在考虑使用 Blob 作为 Function 的输出。也许是错误的想法？但我会尝试你的想法，让你知道并检查你的答案；）
@la_femme_it 关于解决方案，您需要创建一个静态 Web 应用程序和 Azure 功能。您可以在 Azure 存储上托管静态 Web 应用 (docs.microsoft.com/en-us/azure/storage/blobs/…)。
我无法让它运行，可能是错误的函数url...我需要在url中发布参数，为ml模型设置构建和其他一些参数，同时上传该文件...也在官方文档中声明>静态网站不支持CORS。
@la_femme_it 首先，我们只需要在 Azure 函数中配置 CORS 规则。其次，如果要随文件发送其他参数，也可以使用form-data。它喜欢form.append('param1','value1')。然后在Azure函数中，我们可以使用代码form.get('param1')来获取值
是的，这是真的，但我想，他们想使用 rest url 方法来触发它......我也允许使用 CORS，但正如我所说，他们的官方文档指出，CORS 不是允许在静态网络中。我想我会直接部署flask python app...似乎更好的方法和更易于管理...