上传base64图片到七牛云前端遇到的坑

介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒。)

七牛云官方文档如下

https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code

我们前端理所当然就复制黏贴了。。然后问题就来了

看地址

var url = "http://upload.qiniu.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名

  • upload.qiniu.com 上传域名适用于华东空间。华北空间使用 upload-z1.qiniu.com,华南空间使用 upload-z2.qiniu.com,北美空间使用 upload-na0.qiniu.com。
  • var url = "http://upload.qiniu.com/putb64/20264";这里的 20264 是图片没经过 base64 处理的原图字节大小。!!!!!

报错信息之前没有保存 就没得放了

这是官方base64的demo

http://kb-static.qiniucdn.com/base64-demo.html

查看了源码才恍然大悟。坑啊

var url = "http://up.qiniu.com/putb64/-1";  、、地址得这样。!!! 改为-1

下一篇填vue上传base64图片完整代码(请勿介意代码乱哦)

时间: 2024-08-03 07:36:03

上传base64图片到七牛云前端遇到的坑的相关文章

上传base64图片并压缩

elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => this.setState({ dialogVisible: false }) } > <Dialog.Body> <Form labelWidth="120" ref={ e => {this.form=e} } model={ form } rules={ ru

利用 qshell qupload 批量迁移服务器上的网站图片到七牛云

qshell qupload 官方迁移文档 https://developer.qiniu.com/kodo/kb/1685/using-qshell-synchronize-directories https://github.com/qiniu/qshell/blob/master/docs/qupload.md 按照步骤执行命令.会在 ~/.qshell/ 目录下生成 account.json文件.cat 一下,就明白了,是登陆的账号密码了. 配置文件 { "src_dir":&

Android上传Base64图片,图片变成黑色一块的问题

由于Base64编码后的图片字符串有很多+号字符,但在提交到服务端后+号会变为空格,所以服务端再根据Base64字符串生成的图片就不是原来的图片了. 解决方法是: 提交前将+号编码为%2B, postString.replace("+","%2B")像这样

文件上传之图片预览

一.业界现状分析 有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景 图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现 方式一:window.URL (1).

微信开发之调起摄像头、本地展示图片、上传下载图片

之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片. 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口

ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"中说的,这种方法足够轻.足够好.但今天,要在前面的基础上再增加2个需求: 1.异步判断上传的图片是否超过最大限制2.把上传的图片裁剪成大中小3张图片,分别保存,删除的时候一块被删除 上传图片如果超出最大尺寸限制,终止上传,并报错误信息. 前台上传图片,显示缩略图. 在项目根目录下的指定文

node存储element-ui上传的图片

说明 element-ui的Upload组件可以帮助我们上传我们的图片到我们的服务器,可以使用action参数上传图片,也可以使用http-request自定义上传方式.这里我们使用自定义的方式上传. 前端代码 我们只是自定义了一个 upload方法,里面进行发送我们的请求,使用了FormData对象,它将数据编译成键值对,其主要用于发送表单数据. <template> <div id="app"> <h3>头像上传</h3> <e

KindEditor3.x-自动上传Word图片功能.

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法处理多张图片.而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中.如果需要单独保存则需要自已进行处理.比较麻烦. 我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部

Django(十九)文件上传:图片上传(后台上传、自定义上传)、

一.基本设置 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/http/file-uploads/ 1)配置project1/settings.py 因为图片也属于静态文件,所以保存到static目录下. MEDIA_ROOT=os.path.join(BASE_DIR,"static/media") 2)在static目录下创建media目录,再创建应用名称的目录,此例为app1 F:\Test\django-demo\pro