且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使用FileUpload向Azure AD受保护的REST API进行REST API发布请求

更新时间:2022-01-12 00:02:32

adalFetch函数接受一个fetch对象,您可以选择使用任何npm包(例如fetch或Axios)并将其传递.请从react-adal存储库中引用此 issue .在这里,我正在编写一个小片段,以发送具有上传进度的文件.

The adalFetch function takes a fetch object, you can choose to use any npm package like fetch or Axios and pass it on. Refer the this issue from the react-adal repository. Here I'm writing a small snippet to send file with upload progress.

import React, { Component } from "react";
import { adalApiFetch } from "./config";
const API_SERVER = "example.azure.com/upload";

class FilUpload extends Component {
  constructor(props) {
    super(props);
  }

upload(e) {
 let data = new FormData();
 //Append files to form data
    let files = e.target.files;
    for (let i = 0; i < files.length; i++) {
      data.append("files", files[i], files[i].name);
    }

//add other objects or params
data.append("myobject", { name: "Mark" });
data.append("myobject1", { name: "Sarah" });

return new Promise((resolve,reject) => {
  adalApiFetch(fetch, API_SERVER,{
      method: "post",
      headers: { "Content-Type": "multipart/form-data" },
      body: data
    })
    .then(res => res.json())
    .then(response => {
      return resolve(response);
    })
    .catch(err => {
      return reject(err);
    });
});
}
  render() {
    return (
      <div>
        <input multiple onChange={e => this.upload(e)} type="file" id="files" />
      </div>
    );
  }
}

export default FilUpload;

对于ASP.net方面,请参考以下答案 jQuery ajax在asp.net mvc中上传文件

For the ASP.net side please refer the following answer jQuery ajax upload file in asp.net mvc