axiosã§ãã©ãŒã ããŒã¿ãéä¿¡ããããšããŸããããã§ããŸãããChromeéçºããŒã«ã§ã¯ãªã¯ãšã¹ãã«ã³ã³ãã³ãã衚瀺ãããŸããã éåžžãpostmanãä»ããŠåããªã¯ãšã¹ããAPIã¬ã¹ãã³ã¹ã§è¡ããŸãã
js
(newData) => {
const data = new FormData();
data.append('name', 'raphael');
data.append('file', {
uri: newData.image.path,
type: 'image/jpeg',
name: 'teste'
});
return axios.post(`${constants.development.URL_API}/file`, data,
headers: {
'Content-Type': 'multipart/form-data',
},
})`
@corujoraphael奜å¥å¿ããããã®ãªã¯ãšã¹ãã¯ä»¥åã«æ©èœããŠããŸãããïŒ
@corujoraphaelã³ãŒãããã®ãŸãŸå®è¡ããããã©ããã¯
(newData) => {
const data = new FormData();
data.append('name', 'raphael');
data.append('file', {
uri: newData.image.path,
type: 'image/jpeg',
name: 'teste'
});
return axios.post(
`${constants.development.URL_API}/file`,
data,
{
headers: {
'Content-Type': 'multipart/form-data',
}
},
)
}
ãã®åé¡ã¯å¿çãåãåã£ãŠããããããã¯ç§ãã¡ãæã£ãŠããæ å ±ã«åºã¥ãAxiosã®ãã°ã®ããã«ã¯èŠããªãã®ã§ãç§ã¯ãã®åé¡ãéããŸãã
ã³ãŒãã®ãããã°ã«ã€ããŠããã«ãµããŒããå¿ èŠãªå Žåã¯ã Stack Overflow ã Gitterã«æçš¿ãããããã®åé¡ã«ã€ããŠããäžåºŠã³ã¡ã³ãããŠãã ããã
ããããšãïŒ
@ emilyemorehouse ãReact NativeFormDataã䜿çšããŠåãåé¡ã«ééããŸãã
let s = JSON.stringify({ uri: localUri, name: filename, type: type });
let formData = new FormData();
formData.append('ph0t0', s);
axios.post("http://10.0.1.2:8888/uploadphoto", {
method: "POST",
headers: {
'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
},
body: formData,
}).then((resp) => {
console.log(resp);
}).catch(err => {
console.log(err);
});
MultipartFormãFormããŸãã¯PostFormã«ããã€ãã®ããŒãšå€ã®ãã¢ãååšããããšãæåŸ ããŠãã ãã
2018/02/20 18ïŒ25ïŒ31.740 [W] [photo.goïŒ411] req.MultipartFormïŒ nil
2018/02/20 18ïŒ25ïŒ31.740 [W] [photo.goïŒ412] req.FormïŒmap []
2018/02/20 18ïŒ25ïŒ31.740 [W] [photo.goïŒ413] reqã
2018/02/20 18ïŒ25ïŒ31.740 [W] [photo.goïŒ410] reqïŒïŒ{POST / uploadphoto / dialog / 57120e8951c643ab42a8c19f / 000000000000000000000001 HTTP / 1.1 1 1 map [Content-TypeïŒ[application / json; charset = utf-8] User-AgentïŒ[okhttp / 3.6.0] AcceptïŒ[application / jsonãtext / plainã / ] Content-LengthïŒ[419] ConnectionïŒ[Keep-Alive] Accept-EncodingïŒ[gzip]ã¯ãããŒïŒ[lang = zh-TW; PVsessionID = db9a21d63b2d0ea47b68fa8755bd87e2]] 0xc420e3cb80
2018/02/20 18ïŒ25ïŒ31.740 [E] [photo.goïŒ425] [UploadPhotos]ãšã©ãŒïŒãªã¯ãšã¹ãContent-Typeãmultipart / form-dataã§ã¯ãããŸãã
ããŒãžã§ã³æ
å ±
ã¢ã¯ã·ãªã¹ïŒ0.16.2
å芧äŒïŒ25.0.0
åå¿ïŒ16.2.0
åå¿ãã€ãã£ãïŒ0.52.0
ãã®ãã°ã¯ææ°ã®axiosã§ãçºçããŸããããªããããéããããã®ã§ããïŒ
誰ããåçŸå¯èœãªäŸãæäŸã§ããã°ãç§ã¯ãããããã¯ã¢ããããŠåãã§éããŸãã
@ Ernie6711ã³ãŒãã«ãšã©ãŒãããããã§ãããã©ãŒã ããŒã¿ã«è¿œå ããåã«ããã¡ã€ã«ããŒã¿ãæåaxios.post(url[, data[, config]])
ã³ãŒãã«åºã¥ãäŸã次ã«ç€ºããŸãã
const file ={ uri: localUri, name: filename, type: type};
const formData = new FormData();
formData.append('file', s);
const config = {
headers: {
'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
}
};
axios.post("http://10.0.1.2:8888/uploadphoto", formData, config).then((resp) => {
console.log(resp);
}).catch(err => {
console.log(err);
});
@emilyemorehouseã¯wiresharkã®ãã¬ãŒã¹ã確èªããŠãã ããã ããŒã¿ã¯ã¢ããããŒããããŸãããé©åãªãã©ãŒã ããŒã¿ãšã³ã³ãŒãã£ã³ã°ã䜿çšããŠããŸããã äžèšã®äŸã§åé¡ãåçŸã§ããŸãã ç¹°ãè¿ããŸããããªã¯ãšã¹ãã¯æ£åžžã«éä¿¡ãããŠããŸããããšã³ã³ãŒããæ£ãããããŸããã
POST /myserver HTTP/1.1
Content-Type: multipart/form-data
_parts=USERX%2Cusername&_parts=FILE1%2C%5Bobject%20Object%5D
React Nativeç°å¢ã®å€éšã§ã¯ãããŸããããã¡ã€ã«ã¢ããããŒãçšã®ããŒã«ã«ã¯ã©ã€ã¢ã³ããšãµãŒããŒã®äŸããããŸããããã¯æ©èœããé©åã«ãšã³ã³ãŒããããŠããŸãã äžèšã®äŸã¯ãç§ãã¢ã¯ã»ã¹ã§ããªãå€æ°ãšãµãŒããŒã«äŸåããŠãããããå®éã«ã¯åçŸã§ããŸããã
ç§ã®æšæž¬ã§ã¯ãã¢ããããŒãã«åé¡ãããå Žåã¯ããã©ãŒã ããŒã¿ãªããžã§ã¯ãã«è¿œå ãããããŒã¿ãç¡å¹ã§ããããšãåå ã§ãã
@emilyemorehouseãã¡ã€ã«ã®ã¢ããããŒãã¯ãã©ãŠã¶ç°å¢ã§å®å šã«æ©èœãã
åå¿ãã€ãã£ãã§ç°¡åãªãã¡ã€ã«ã¢ããããŒããè©ŠããŠãwiresharkãã¬ãŒã¹ã確èªããã ãã§ã皌åäžã®ãµãŒããŒãå¿ èŠãããŸãã...
ç§ã¯åãããã«ãªããŸãããAxiosã¯ãã€ãã£ãã«åå¿ããŸãã
@duongtranpycoãããžã§ã¯ããã
PSäž»ã«JSONãéä¿¡ããå Žåã¯ãã³ãŒããå€æŽããŸãã ç§ã®å ŽåããµãŒããŒã¯éåžžãã©ãŒã ãæåŸ ããŸãã
const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
for (let value of [].concat(data[key]))
pairs.push([`${key}`, `${value}`]);
return pairs;
}, []).map(pair=>pair.map(encode).join('=')).join('&');
if (Object.keys(params||{}).length)
url += '?'+escape(params);
if (method=='POST' && typeof body=='object')
{
if (body instanceof FormData)
headers['Content-Type'] = 'multipart/form-data';
else
{
body = escape(body);
headers['Content-Type'] = 'application/x-www-form-urlencoded';
}
}
let {statusCode, request: req} = await new Promise((resolve, reject)=>{
let xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.withCredentials = true;
xhr.responseType = {json: 'text'}[responseType]||responseType;
xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
xhr.onerror = ()=>reject(new TypeError('Network request failed'));
xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
for (let key in headers)
xhr.setRequestHeader(key, headers[key]);
xhr.send(body||null);
});
if (statusCode<200 || statusCode>=400)
throw new Error(`network request failed with ${statusCode}: ${url}`);
switch(responseType)
{
case 'json':
return JSON.parse(req.responseText);
case 'text':
return req.responseText;
case 'request':
return req;
}
return req.response;
};
request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});
ããã«ã¡ã¯ãç§ã¯åãåé¡ã«çŽé¢ããŠããŸãã 誰ãã解決çãèŠã€ããŸãããïŒ
2çªç®ã®@giladnoã ä»ã®éšåãé²ããŠããã®ã§ã代ããã«åé¿çã䜿çšããŸããç»åãã¢ããããŒããããšãã«ãfetchïŒïŒã䜿çšããŠç¹å®ã®é¢æ°ãèšè¿°ããŸãã
以åã«è©Šè¡ããŸããããããŒã¿ãŸãã¯åŒæ°ãæåååããŠãçµæã«åœ±é¿ããŸããã ãµãŒããŒã¯åŒã³åºããåä¿¡ããŸããããããŒã¿ã¯éä¿¡ãããŸããã§ããã
@ Ernie6711ã©ãããããããŒãç ŽæããŠããããããµãŒããŒã¯ãã©ãŒã ããŒã¿ãåãå ¥ããããšãã§ããŸããã ç§ã¯fetchïŒïŒã§åé¿çãå®è£ ããŸããããåé¡ãªãåäœããŸããã
ç§ã¯react-nativeã«ããã€ãã®åé¡ããããŸããã
åé¡ã¯ããããŒã§ã¯ãããŸããã
Webã§ã¯ãããšãã°æ¬¡ã®ããã«ãªããŸãã
let formData = new FormData()
formData.append('key', true // bool value)
ãã ããReact Nativeã§ã¯ãããŒã®å€ã¯æååã§ããå¿ èŠããããŸãã
formData.append('key', 'true')
@giladnoãèšåããŠããããã«ãURLã«æçš¿ãããšãã«react nativeã§åãåé¡ããreactnativeã§ãã¹ãããå¿ èŠãããã人ã ã@emilyemorehouseãå ±åãããšã©ãŒã確èªã§ããŸãã 14æ¥åã«ãšã©ãŒãå ±åããŸããhttps://github.com/axios/axios/issues/1618 ãããã誰ãå¿çããŠããŸãããã©ã€ãã©ãªã®readmeã«ãreactnativeã§axiosããµããŒãããŠããªãããšã説æããŠãã ãããå€ãã®éçºè ã¯æéãç¡é§ã«ããŸããã
ãããç§ã¯ãã®æ¹åæ§ã«æè¬ããŠããŸããããReactNativeã§ãã¡ã€ã«ã®ã¢ããããŒãããã¹ãããã ããã¯ããã»ã©ç°¡åã§ã¯ãããŸããã ç§ã¯ReactNativeã§äœæ¥ããããšã¯ããŸããªãããã¹ãçšã®ãã¡ã€ã«ã¢ããããŒãã䜿çšããŠãããžã§ã¯ããèµ·åããã«ã¯ããªãã®æéãããããŸãã
ReactNativeã§æ©èœãããã©ãŒã ããŒã¿ã䜿çšããåçŽãªPOSTããããŸãã
const formData = new FormData();
formData.append("data", true);
const config = {
headers: {
"Content-Type": "multipart/form-data; charset=utf-8;"
}
};
axios.post(URL, formData, config).then(
response => {
console.log({ response });
},
error => {
console.log({ error });
}
);
true
ã¯ãµãŒããŒã«éä¿¡ããããšæåååãããŸãããããã¯èå³æ·±ãããšã§ãã
ãšã¯èšããã®ã®ãç§ãç°¡åã«ã¹ãã³ã¢ããã§ããäŸã誰ããæäŸã§ããã°ãç§ã¯ããããã£ãšèª¿ã¹ãŠããããã§ãã
@corujoraphaelã©ã®ããã«ããŠããã解決ããŸãããïŒ
è¿œå ã®çŽåã«"Image.type='image/png"
ãããªã¿ã€ããç»åãªããžã§ã¯ãå
ã«è¿œå ããã³ã³ãã³ãã¿ã€ãã"Content-Type":"multipart/form-data"
ã
image.type='image/png'
formData.append("resource", image);
return axios
.post('yourBAckendUrl', formData, {
headers: {
Authorization: "yourTokenHere",
"Content-Type": "multipart/form-data"
}
})
ããã誰ããå©ããããšãé¡ã£ãŠããŸãã
ãããæ©èœãããããšãã§ããŸããã§ãããmultipart/ form-dataãS3ïŒãããªïŒã«PUTããããšããŠããŸãã typeãªãã·ã§ã³ã䜿çšããŠã圹ã«ç«ã¡ãŸããã§ããã multipart / form-dataããããŒãPUTãªã¯ãšã¹ãã«å«ãŸããŠããªãããã§ãã
const data = new FormData();
data.append('video', {
uri: 'file:///<path_to_video_on_iphone.mov',
type: 'video/quicktime',
name: 'video.mov',
});
response = yield call(() => {
return api.put(url, data, {
headers: {
'Content-Type': 'multipart/form-data',
},
transformRequest: [
(data, headers) => {
delete headers.common.Authorization;
return data;
}
]
});
});
ãã®å ŽåãfetchïŒDã䜿çšããŸã
var data = new FormData();
data.append('my_photo', {
uri: filePath, // your file path string
name: 'my_photo.jpg',
type: 'image/jpg'
}
fetch(path, {
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
},
method: 'POST',
body: data
});
axiosããŒãžã§ã³0.18.0
åãåé¡ãçºçããŸãã
FormData
äœæãããšãã«ãäœããã®çç±ã§post, put
ãªã©ã«æ¬æããªãå Žåãaxiosã¯ããããŒContent-Type
å
éšçã«åé€ããŸããæ¬æã¯ç©ºã®ãŸãŸã§ãã
ããã¯ç§ã®ã³ãŒãã§ãïŒ
const sendFormData = images => {
// images is an array of base64 images (strings)
const formData = new FormData();
images.forEach((img, i) => {
formData.append('file', img);
formData.append('name', `${type}-${i + 1}`);
});
config.headers = {
.'Content-Type': 'multipart/form-data'
};
return axios.post(`http://someurl.com/api/upload-images`, formData, config)
.then(response => {
// handle success
})
.catch(err => {
// handle err
});
}
React NativeããŒãžã§ã³0.55.3
ãã®ãµã³ãã«ã³ãŒãã¯æ©èœããŠããŸããã ãªã¯ãšã¹ãã®æ¬æã空ã§ã Content-Type
ããããŒãåé€ãããŠããŸã
ç§ã¯åãåé¡ãæ±ããŠããããããã°ããã§ãã¯ã€ã³ãããšãã®ç§ã®äœã¯æååã§ã
ãããŠããã«ç§ã®ã³ãŒã
const formData = new FormData();
formData.append('photo', {
uri: response.uri.replace('file://', ''),
mineType: 'image/jpeg',
fileType: 'image/jpg',
type: 'image/jpg',
name: 'test.jpg'
});
console.log('form data', formData);
Axios({
method: 'post',
url: 'https://dev-host.luxstay.net/api/rooms/10740/photos',
data: formData,
headers: {
Authorization: token,
'Content-Type': 'multipart/form-data'
}
});
æŽæ°ïŒã¢ããªããããã°ã¢ãŒãã§ãã£ãããããšã©ãŒãçºçããŸããã ãããã°ã¢ãŒãããªãã«ãããšãåäœããŸãã
axiosã®xhrã¢ããã¿ãŒã«ã³ãŒãããããŸãif (utils.isFormData(requestData)) {
delete requestHeaders['Content-Type']; // Let the browser set it
}
ç§ã¯react-nativeã§ãã³ãŒãã§èšå®ãããšããŠãããã«ãããŒããã©ãŒã ããŒã¿ãéä¿¡ããŠããå Žåã¯content-typeããããŒãåé€ãããšæããŸãã
ããããã©ã€ã³ã¢ãŠããã³ã¡ã³ãã¢ãŠãããããšã§react-nativeã®åé¡ã解決ãããã©ããã¯ããããŸããã
axiosããŒãžã§ã³
0.18.0
åãåé¡ãçºçããŸãã
FormData
äœæãããšãã«ãäœããã®çç±ã§post, put
ãªã©ã«æ¬æããªãå Žåãaxiosã¯ããããŒContent-Type
å éšçã«åé€ããŸããæ¬æã¯ç©ºã®ãŸãŸã§ãã
ããã¯ç§ã®ã³ãŒãã§ãïŒconst sendFormData = images => { // images is an array of base64 images (strings) const formData = new FormData(); images.forEach((img, i) => { formData.append('file', img); formData.append('name', `${type}-${i + 1}`); }); config.headers = { .'Content-Type': 'multipart/form-data' }; return axios.post(`http://someurl.com/api/upload-images`, formData, config) .then(response => { // handle success }) .catch(err => { // handle err }); }
React NativeããŒãžã§ã³
0.55.3
ãã®ãµã³ãã«ã³ãŒãã¯æ©èœããŠããŸããã ãªã¯ãšã¹ãã®æ¬æã空ã§ãContent-Type
ããããŒãåé€ãããŠããŸã
ããã§ãããã¯ã©ã®ããã«èŠããã¹ãã§ããïŒ ãªããžã§ã¯ããªããžã§ã¯ãããããŸãã
@tkserverãªããžã§ã¯ããããããããtoStringïŒïŒãããšãã®ããã«èŠããŸãã
const a = {
name: 'dasdasd'
}
console.log(a.toString());
@tkserverãªããžã§ã¯ããããããããtoStringïŒïŒãããšãã®ããã«èŠããŸãã
const a = { name: 'dasdasd' } console.log(a.toString());
ãã¶ãç§ã¯ã¯ã£ããããŠããŸããã§ããã ããããŒã衚瀺ãããšãã«ããªã¯ãšã¹ããã€ããŒãã«[ãªããžã§ã¯ããªããžã§ã¯ã]ã衚瀺ããå¿ èŠããããŸããïŒ
@tkserverãããã¬ãŒã§ãããã¯ãŒã¯æ€æ»ãæå¹ã«ãªã£ãŠããå Žåãreact-nativeã®FormDataããªãŒããŒã©ã€ãããããããã¯ãŒã¯æ€æ»ã§[Objectobject]ã®ããã«èŠãã空ã®FormDataãªããžã§ã¯ããæž¡ãããŸãã
ãããã¯ãŒã¯æ€æ»ããªãã«ããŠãªã¯ãšã¹ããè¡ã£ãŠã¿ãŠãã ããããããã圹ã«ç«ãŠã°å¹žãã§ãã
Aman725ãminhphung210ããã®ä»ãã¹ãŠã«æè¬ããŸãã å®éã®ããã€ã¹ã§ã³ãŒãã䜿çšãããšãã¢ããããŒãã¯æ£ããæ©èœããŸãã ããã¯iOSã·ãã¥ã¬ãŒã¿ãŒã«é¢é£ããŠããããã§ãã
ãã®åé¡ãçºçããŸããããçŸåšã¯ä¿®æ£ãããŠããŸãã
ãã®çç±ã¯ãç§ããããã¯ãŒã¯èŠæ±ããããã°ããŠããããã§ãã ã¢ããªã®ãšã³ããªãã€ã³ãã«æ¬¡ã®ã³ãŒãè¡ããããŸããã
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
ã³ã¡ã³ãããŸããããçŸåšã¯æ©èœããŠããŸãã
// IMPORTANT: this will cause FormData requests to fail.
// GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
ç§ã¯ã¡ããã©ãããèŠã€ããŸããïŒ https ïŒ
XMLHttpRequest
ãã«ãããŒãã£ãšããŠé©åã«ã¢ããããŒããããããã«ããªã¯ãšã¹ããã©ã®ããã«äœæãããæããŠãã ããã ãããã¯ãŒã¯ãšã©ãŒãçºçãç¶ããŸãïŒ
Error: Network Error
at createError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168963:17)
at XMLHttpRequest.handleError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168871:16)
at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28708:27)
at XMLHttpRequest.setReadyState (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28461:20)
at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28288:16)
at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28398:47
at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:3291:37)
at MessageQueue.__callFunction (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2588:44)
at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2345:17
at MessageQueue.__guard (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2542:13)
æŽæ°ïŒä»ãããæ©èœãããããã«ç®¡çããŸãã çŸåšäœ¿çšäžïŒ
formData.append('picture', {
uri: data.uri,
name: fname,
type: 'image/' + ext
});
人ã
ããŸã ãã®åé¡ãçµéšããŠããå ŽåããããŠããªãã¯GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
ãããã¯ãŒã¯ãªã¯ãšã¹ãããããã°ããããã®ã¹ãããããè¿œå ããŠã¿ãŠãã ããGLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
ããã¯ç§ã®ããã«åããã
è¿œå ã®çŽåã«
"Image.type='image/png"
ãããªã¿ã€ããç»åãªããžã§ã¯ãå ã«è¿œå ããã³ã³ãã³ãã¿ã€ãã"Content-Type":"multipart/form-data"
ãimage.type='image/png' formData.append("resource", image); return axios .post('yourBAckendUrl', formData, { headers: { Authorization: "yourTokenHere", "Content-Type": "multipart/form-data" } })
ããã誰ããå©ããããšãé¡ã£ãŠããŸãã
ãååããã ãããããšãããããŸãïŒ iOS Simunatorã§åçãã¢ããããŒãã§ããŸããããAndroidã§ã¯ã¢ããããŒãã§ããŸããã§ããã
ç»åã¿ã€ãããimage / jpegãã«èšå®ããåŸããããã¯ãŒã¯ãšã©ãŒãçºçããªããªããŸããã
const formData = new FormData();
formData.append('file', {
uri: pictureUri,
type: 'image/jpeg',
name: 'profile-picture'
})
è¿œå ã®çŽåã«
"Image.type='image/png"
ãããªã¿ã€ããç»åãªããžã§ã¯ãå ã«è¿œå ããã³ã³ãã³ãã¿ã€ãã"Content-Type":"multipart/form-data"
ãimage.type='image/png' formData.append("resource", image); return axios .post('yourBAckendUrl', formData, { headers: { Authorization: "yourTokenHere", "Content-Type": "multipart/form-data" } })
ããã誰ããå©ããããšãé¡ã£ãŠããŸãã
ãååããã ãããããšãããããŸãïŒ iOS Simunatorã§åçãã¢ããããŒãã§ããŸããããAndroidã§ã¯ã¢ããããŒãã§ããŸããã§ããã
ç»åã¿ã€ãããimage / jpegãã«èšå®ããåŸããããã¯ãŒã¯ãšã©ãŒãçºçããªããªããŸããã
const formData = new FormData(); formData.append('file', { uri: pictureUri, type: 'image/jpeg', name: 'profile-picture' })
ããã圹ç«ã€ãããããªã人ã®ããã«ãéä¿¡ãããã³ã³ãã³ãã®ã¿ã€ããããããªãå Žåã¯ã multipart/form-data
ã ä»ãããèªãã§ããã®ã¯æãããªããã§ãããã¡ãã£ã¢ãæ©èœãããã®ã«ããªãã®æéãããããŸããã
data.append("image", {
name: "some_name", // also, won't work without this. A name is required
height: image.height,
width: image.width,
type: "multipart/form-data", // <-- this part here
uri:
Platform.OS === "android" ? image.uri : image.uri.replace("file:/", "")
});
ããã«ã¡ã¯ãç§ã¯Vue.Jsã§Axiosã¢ããããŒããæåºããããšããŠããŸãã 誰ããåé¡ã確èªããŠèª¬æã§ããŸããïŒ
HTMLã§<input type="file" id="file" ref="file" multiple @change="assignFiles"/>
Jsã§
`assignFilesïŒeïŒ{
let uploadedFiles = this.$refs.file.files;
for( var i = 0; i < uploadedFiles.length; i++ ) {
this.form.AttachmentDocs.push(uploadedFiles[i]);
}
console.log(this.form.AttachmentDocs);
},`
ãããã£ãŠãæçš¿ãããªã¬ãŒããªããããã©ãŒã ããŒã¿ãè¿œå ããŠããŸãã
`proceedSaveïŒeïŒ{
e.preventDefault();
this.$v.$touch();
if(this.$v.$invalid) {
return;
}
this.showLoading(this.loaderId,true);
this.postDatas.append('form',JSON.stringify(this.form));
for( var i = 0; i < this.form.AttachmentDocs.length; i++ ){
let attachment = this.form.AttachmentDocs[i];
this.postDatas.append('files['+i+']',attachment,attachment.name);
}
} `
æçš¿ã§ã¯ãã³ã³ãœãŒã«ãŠã£ã³ããŠã®ããããŒã確èªããŸããã
files [0] :(ãã€ããªïŒ
files [1] :(ãã€ããªïŒ
ãã¡ã€ã«[2] :(ãã€ããªïŒ
files [3] :(ãã€ããªïŒ
ç§ã®ãµãŒããŒåŽã§ã¯ããã¡ã€ã«ãååŸããããšã¯ã§ããŸããã
äœãé¢ä¿ããããããããŸãã
this.postDatas.append('files['+i+']',attachment,attachment.name);
files['+' + i + '+']
è©Šããã ãã
ãã§ããAPIã§ãåãåé¡ããããŸãã req.bodyã¯ããŒãjsã§ç©ºã§ããã 'express-formidable'ã䜿çšãããšãåé¡ã解決ããŸããã https://www.npmjs.com/package/express-formidable
äœãé¢ä¿ããããããããŸãã
this.postDatas.append('files['+i+']',attachment,attachment.name);
files['+' + i + '+']
è©Šããã ãã
Sry +ã¯é£çµã瀺ããwatã¯æåå '+'ã®äœ¿çšã§ãã çµæã¯ãã¡ã€ã«ã«ãªããŸã[+0+]
ãã§ããAPIã§ãåãåé¡ããããŸãã req.bodyã¯ããŒãjsã§ç©ºã§ããã 'express-formidable'ã䜿çšãããšãåé¡ã解決ããŸããã https://www.npmjs.com/package/express-formidable
app.use(express.json({ extended: false }));
ãå«ããŸãããïŒ
äœãé¢ä¿ããããããããŸãã
this.postDatas.append('files['+i+']',attachment,attachment.name);
files['+' + i + '+']
è©Šããã ããSry +ã¯é£çµã瀺ããwatã¯æåå '+'ã®äœ¿çšã§ãã çµæã¯ãã¡ã€ã«ã«ãªããŸã[+0+]
çŸåšã®ã³ãŒãã§ã¯ãåžžã«forã«ãŒãã§files[+i+]
ã«ãªããŸãã files[+0+], files[+1+], files[+2+], etc
ã«ãªãããšã¯ãããŸããã
ãŸãã files[+0+]
ã¯ååšããŸããã äœãããããšããŠããã®ãããããªãã files[0], files[1], files[2]...
ãå¿
èŠã§ããïŒ ãªããžã§ã¯ããäœæããããšããŠããå Žåã¯ã files['+0+']
ã䜿çšã§ããŸãããç¹°ãè¿ãã«ãªããŸãããäœãéæããããšããŠããã®ãããããŸããã
ãã§ããAPIã§ãåãåé¡ããããŸãã req.bodyã¯ããŒãjsã§ç©ºã§ããã 'express-formidable'ã䜿çšãããšãåé¡ã解決ããŸããã https://www.npmjs.com/package/express-formidable
app.use(express.json({ extended: false }));
ãå«ããŸãããïŒ
ããããããããæãããããšã«1ã€ã®åé¡ããããŸãã ã¢ããããŒããããç»åã¯ããã£ãŒã«ããå¿ èŠãšããŸãã ãªã¯ãšã¹ããã¡ã€ã«ã«ã¯äœããããŸããã ãªããããèµ·ãã£ãŠããã®ãããããªãã
@duongtranpycoãããžã§ã¯ããã
PSäž»ã«JSONãéä¿¡ããå Žåã¯ãã³ãŒããå€æŽããŸãã ç§ã®å ŽåããµãŒããŒã¯éåžžãã©ãŒã ãæåŸ ããŸãã
const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{ const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{ for (let value of [].concat(data[key])) pairs.push([`${key}`, `${value}`]); return pairs; }, []).map(pair=>pair.map(encode).join('=')).join('&'); if (Object.keys(params||{}).length) url += '?'+escape(params); if (method=='POST' && typeof body=='object') { if (body instanceof FormData) headers['Content-Type'] = 'multipart/form-data'; else { body = escape(body); headers['Content-Type'] = 'application/x-www-form-urlencoded'; } } let {statusCode, request: req} = await new Promise((resolve, reject)=>{ let xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.withCredentials = true; xhr.responseType = {json: 'text'}[responseType]||responseType; xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr}); xhr.onerror = ()=>reject(new TypeError('Network request failed')); xhr.ontimeout = ()=>reject(new TypeError('Network request timed out')); for (let key in headers) xhr.setRequestHeader(key, headers[key]); xhr.send(body||null); }); if (statusCode<200 || statusCode>=400) throw new Error(`network request failed with ${statusCode}: ${url}`); switch(responseType) { case 'json': return JSON.parse(req.responseText); case 'text': return req.responseText; case 'request': return req; } return req.response; }; request.get = (url, opt = {})=>request({...opt, url, body: null}); request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});
ç§ã¯èªåã®ãããžã§ã¯ãã§ãã®ã³ãŒãã䜿çšããŠããŸãã ç§ã¯ãã®ã³ãŒããç解ããããšããŠããŸãã 1ã€ã®è³ªåããã®è¡ã¯å¿
èŠã§ããã
forïŒlet value of [] .concatïŒdata [key]ïŒïŒïŒ ç°¡åã«æžããŸãã
pair.pushïŒ[ ${key}
ã ${data[key]}
]ïŒ;
人ã ããŸã ãã®åé¡ãçµéšããŠããå ŽåããããŠããªãã¯
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
ãããã¯ãŒã¯ãªã¯ãšã¹ãããããã°ããããã®ã¹ãããããè¿œå ããŠã¿ãŠãã ããGLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
ããã¯ç§ã®ããã«åããã
ã©ãã§ããïŒ
ç§ãåé¡ãæ±ããŠããŸããã ããã¯ãAndroidã®ãã¡ã€ã«ãã¹ãåå ã§çºçããŸãã
const path = utils.isAndroidïŒïŒïŒ
ãããŠããã¯æ¬¡ã®ããã«å®è£
ããããšã§åé¡ãªãåäœããŸã
const formData = new FormData();
const path = utils.isAndroid() ? `file://${filePath}` : filePath;
formData.append('Voice', {
uri: path,
name: 'test',
type: 'audio/wav',
});
formData.append('Content-Type', 'audio/wav');
const headers = {
'Content-Type': 'multipart/form-data',
};
return this._sendRequest(url, 'POST', formData, headers);
data.append('file', {
uri: newData.image.path,
type: 'image/jpeg',
name: 'teste'
name:'teste.jpeg'
ãããªååã䜿çšãããšãæ©èœããŸãã ãã¡ã€ã«ã«ãã©ãŒããããäžããå¿
èŠããããŸããããããªããšæ©èœããŸããã
ãexample.jpegããšããååã§ä¿®æ£ããŸãã
axiosã§ãããªãã¢ããããŒãããããšããŠæ°æ¥åŸãç§ã¯ãã ãããããŸããã RNFetchBlobã¯ãç¹ã«Androidãããã¡ã€ã«ãã¢ããããŒãããããã®ããè¯ããªãã·ã§ã³ã§ãã ãã®ã»ã¯ã·ã§ã³ã¯ç°¡åã«å®è£ ã§ããŸã
æãåèã«ãªãã³ã¡ã³ã
ãã®ãã°ã¯ææ°ã®axiosã§ãçºçããŸããããªããããéããããã®ã§ããïŒ