Einige Szenarien, z. B. von Canvas erhaltene Bilder oder vom WeChat-Entwicklungs-SDK zurückgegebene Bilder, liegen im data:img-Format vor. Wir müssen sie auf den Server hochladen und dann konvertieren.
Konvertieren Sie dataURL in Blob
// base64 in blobdataURItoBlob(dataURI) konvertieren { // base64/URLEncoded-Datenkomponente in rohe Binärdaten konvertieren, die in einem String enthalten sind let byteString; if (dataURI.split(',')[0].indexOf('base64') > = 0) { byteString = atob(dataURI.split(',')[1] } else byteString = unescape(dataURI.split(',')[1]); // die MIME-Komponente heraustrennen const mimeString = dataURI .split(',')[0] .split(':')[1] .split(' ;')[0]; // schreibe die Bytes des Strings in ein typisiertes Array const ia = new Uint8Array(byteString.length); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); return new Blob([ia], { type: mimeString });}Formular zum Hochladen des Build-Formulars
const blob = dataURItoBlob(imgDataUrl); const formData = new FormData();// formData.append('auth', state.token.auth); Sie können optional eine Authentifizierung hinzufügen formData.append('file', blob); Zum Hochladen von Daten verwende ich axiosconst params = { url: '/store/file', payload: formData }; this.upload(params);Ich habe Axios gekapselt
export const upload = (params) => { const { url, payload } = params return axios.post(url, payload, { headers: { 'Content-Type': 'multipart/form-data' } }).then( x => x.data)}Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.