สถานการณ์บางอย่าง เช่น รูปภาพที่ได้รับจาก Canvas หรือรูปภาพที่ส่งคืนโดย SDK การพัฒนา WeChat จะอยู่ในรูปแบบ data:img เราจำเป็นต้องอัปโหลดรูปภาพเหล่านั้นไปยังเซิร์ฟเวอร์ จากนั้นจึงจำเป็นต้องแปลงรูปภาพเหล่านั้น
แปลง dataURL เป็น Blob
// แปลง base64 เป็น blobdataURItoBlob(dataURI) { // แปลงส่วนประกอบข้อมูล base64/URLEncoded เป็นข้อมูลไบนารีดิบที่เก็บไว้ในสตริง ให้ byteString; if (dataURI.split(',')[0].indexOf('base64') > = 0) { byteString = atob(dataURI.split(',')[1]); } อื่น ๆ 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); } ส่งคืน 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 }; this.upload(พารามิเตอร์);ฉันได้ห่อหุ้มสัจพจน์แล้ว
ส่งออก const อัปโหลด = (params) => { const { url, payload } = params กลับ axios.post (url, payload, { ส่วนหัว: { 'ประเภทเนื้อหา': 'หลายส่วน / แบบฟอร์มข้อมูล' } }). จากนั้น ( x => x.data)}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network