[英]How to send form data with react
我有一個使用這種方法的webapi:
public async Task<IHttpActionResult> PutTenant(string id, Tenant tenant, HttpPostedFile certificateFile)
{
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["AzureStorageKey"].ToString());
// Create the blob client.
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Retrieve reference to a previously created container.
CloudBlobContainer container = blobClient.GetContainerReference(ConfigurationManager.AppSettings["certificatesContainer"].ToString());
// Retrieve reference to a blob named "myblob".
CloudBlockBlob blockBlob = container.GetBlockBlobReference("myblob");
// Create or overwrite the "myblob" blob with contents from a local file.
blockBlob.Properties.ContentType = certificateFile.ContentType;
blockBlob.UploadFromStream(certificateFile.InputStream);
var tenantStore = CosmosStoreFactory.CreateForEntity<Tenant>();
tenant.CertificatePath = blockBlob.Uri;
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tenant.TenantId)
{
return BadRequest();
}
var added = await tenantStore.AddAsync(tenant);
return StatusCode(HttpStatusCode.NoContent);
}
現在我有一個反應形式:
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';
import axios from 'axios';
const API_SERVER = "example.azure.com/upload";
export default class 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);
}
let d = {
method: 'post',
url: API_SERVER,
data: data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
},
},
onUploadProgress: (eve) => {
let progress = utility.UploadProgress(eve);
if (progress == 100) {
console.log("Done");
} else {
console.log("Uploading...",progress);
}
},
};
let req = axios(d);
return new Promise((resolve)=>{
req.then((res)=>{
return resolve(res.data);
});
});
}
render(){
const { data } = this.state;
const { rowStyle, colStyle, gutter } = basicStyle;
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.TenantAdministration" />}
subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
>
<ContentHolder>
{//Put Form here with file upload.
}
<form>
Name: <input type="text" name="tenanturl" />
Password: <input type="text" name="password" />
<input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
<input type="submit" value="Submit" />
</form>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
租戶對象具有2個字符串屬性,其形式相同。 如何將這兩個字符串屬性作為租戶對象發送? 如何觸發提交表單?
反應中的新形式
這是我的樣品。 基本上,我將定義要發送到API的屬性。 在這種情況下,我使用axios
const data = {
Username: this.state.username,
Email: this.state.email,
}
axios
.post(url, data)
.then(data => {
//something
})
.catch(error => {
//something
});
在我的API控制器中,我將使用[FormBody]標簽接收正在傳遞到服務器的數據
public async Task<IActionResult> AddNewUser([FromBody] UserInputViewModel userInputVm)
請根據您的代碼進行相應調整。 如果您有任何問題,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.