最近在做一个项目，需要在前端对图片进行切片，上传到七牛云技术点canvas.toBlob(blob=>{});//将画布保存为二进制文件formData.append('file',blob,'filename');//将二进制文件添加到FormDataajax.send(formData);//上传数据到后端处理代码实现目前没看到七牛云提供的支持上传blob到云端的JSSDK，所以这里自己实现了。注意ajaxpostformData发送到七牛云时，不要设置content-type，让浏览器自己处理}ajax(url='',opt={}){constoptions={method:'GET',async:true,dataType:'JSON',...opt};returnnewPromise((resolve,reject)=>{constajax=this.createAjax();if(ajax){const_async=typeofoptions.async==='boolean'?options.async:true;ajax.open(options.method||'GET',url,_async);if(options.headers){Object.keys(options.headers).forEach(key=>{ajax.setRequestHeader(key,options.headers[key]);}});}ajax.onreadystatechange=()=>{if(ajax.readyState===4){if(ajax.status>=200&&ajax.status<=400){letres=ajax.responseText;如果(options.dataType&&options.dataType.toUpperCase()==='JSON'){res=JSON.parse(res);}resolve(res,ajax.response);}else{reject(newError('请求失败:'+ajax.status))}}};ajax.send(options.data);}else{reject(newError('创建Ajax请求失败！'));}});}createAjax(){让xmlhttp;如果(window.XMLHttpRequest){xmlhttp=newXMLHttpRequest();}else{xmlhttp=newActiveXObject("Microsoft.XMLHTTP");}返回xmlhttp；}getToken(){如果(this._options.token){返回Promise.resolve(this._options.token);}else{if(typeofthis._options.getToken==='function'){constt=this._options.getToken();如果（t&&typeoft.then==='函数'）{返回t.then(token=>{this._options.token=token;returntoken;})}elseif(typeoft==='string'){this._options.token=t;返回Promise.resolve(t);}else{returnPromise.reject(newError('options.getToken必须返回Promise或stringtoken'));}}elseif(typeofthis._options.getTokenUrl==='string'){returnthis.ajax(this._options.getTokenUrl,{headers:{authorization:this._options.authorization}}).then(res=>{this._options.token=res.uptoken;returnthis._options.token;}).catch(ex=>{thrownewError('获取uptoken失败:'+ex.message);});}else{returnPromise.reject(newError('无法获取token'));}}}upload(file,filename,key){returnthis.getToken().then(token=>{constformData=newFormData();formData.append('key'，键||文件名）;formData.append('token',token);formData.append('文件',文件,文件名);返回表单数据；}).then(data=>{//注意不要设置content-type，浏览器会自动填充returnthis.ajax('http://upload.qiniu.com/',{method:'POST',数据，}）;}）;}}canvas.toBlob(blob=>{constfilename=Date.now()+Math.random()+'.png';constqiniu=newQiniu({getTokenUrl:'这里写接口地址获取七牛token'});qiniu.upload(blob,filename);},'image/png');
