若是不想要服务端实现处理base64格式的图片的转换,那么在浏览器端来实现,部分属于伪代码, 且 axios 未封装处理,仅做为开发参考,请勿直接拷贝使用 ?javascript
主要经过react来实现,下面是封装以后的上传方法,仅做为开发参考java
uploadPic(base64String, suc, fail) { // 下面将要把 base64 转换成formdata // 这里对base64串进行操做,去掉url头,并转换为byte let bytes = window.atob(base64String.split(',')[1]); let array = []; for(let i = 0; i < bytes.length; i++){ array.push(bytes.charCodeAt(i)); } let blob = new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); // 生成FormData对象 let fd = new FormData(); // 注:此处 file 应和后台接收参数匹配 fd.append('file', blob, Date.now() + '.jpg'); let config = { headers: {'Content-Type': 'multipart/form-data'} } let url = Constant.fileUrl; // 加载中 this.setState({ loadingShow: true, loadingText: '图片上传中...', }); // 添加请求头 axios.post(url, fd, config) .then(response => { if(response.data.resultcode === 200) { suc && suc(response.data.content[0]); } else { fail && fail(response.data.resultmsg); } }) .catch(() => { fail && fail('网络缘由, 未上传成功!'); }); } // 把图片保存到服务器端 savePic(imgUrl, suc, fail) { // 添加请求头 let url = Constant.appServerUrl + "/file-save"; let postData = { protocolImg: imgUrl, puid: Storage.get('uid') }; axios.post(url, postData) .then(response => { if(response.data.resultcode === 200) { suc && suc(response.data); } else { fail && fail(response.data); } }) .catch(() => { fail && fail('网络缘由, 未保存成功!'); }); }
// 上传base64的图片 this.uploadPic(base64String, (url) => { // 成功的回调 this.setState({ loadingText: '图片保存中...', }); // 保存图片 this.savePic(url, (msg)=>{ // console.log('msg', msg); // 保存成功,提示 this.setState({ loadingText: '请稍后...', isProtocol: true, }); // 开始进行支付操做 // this.clickToPayForOrder(); }, (error)=>{ // 保存失败 提示: alert('图片保存失败: ' + error); }); }, (errMsg) => { // 失败的回调 alert("发生错误: ", errMsg); // loading 消失 this.setState({ loadingShow: false, loadingText: '' }); });