캔버스에서 얻은 이미지나 WeChat 개발 SDK에서 반환한 이미지와 같은 일부 시나리오는 data:img 형식으로 되어 있으며, 이를 서버에 업로드한 후 변환해야 합니다.
dataURL을 Blob으로 변환
// base64를 blobdataURItoBlob(dataURI)로 변환 { // base64/URLEncoded 데이터 구성 요소를 문자열에 포함된 원시 바이너리 데이터로 변환 let byteString if (dataURI.split(',')[0].indexOf('base64') > = 0) { byteString = atob(dataURI.split(',')[1]) } else byteString = unescape(dataURI.split(',')[1]); // MIME 구성 요소를 분리합니다. const mimeString = dataURI .split(',')[0] .split(':')[1] .split(' ;')[0]; // 문자열의 바이트를 형식화된 배열에 씁니다. const ia = new Uint8Array(byteString.length) for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i) } return new Blob([ia], { 유형: mimeString });},빌드 양식 업로드 양식
const blob = dataURItoBlob(imgDataUrl); const formData = new FormData();// formData.append('auth', state.token.auth); 선택적으로 인증을 추가할 수 있습니다 formData.append('file', blob ); 데이터를 업로드하려면 axiosconst params = { url: '/store/file', payload: formData }; const data = wait를 사용합니다. this.upload(params);나는 axios를 캡슐화했습니다.
내보내기 const 업로드 = (params) => { const { url, payload } = params return axios.post(url, payload, { headers: { 'Content-Type': 'multipart/form-data' } }).then( x => x.데이터)}위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.