blob和base64转文件并通过ajax上传到服务器

tuomao 发布于2019-08-26 10:42 / 975人阅读

摘要：有时候，我们不想通过上传本地图片的方式上传图片，而是通过相机拍照，将这个拍照后的图片直接上传到服务器上，不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。

有时候，我们不想通过上传本地图片的方式上传图片，而是通过相机拍照，将这个拍照后的图片直接上传到服务器上，不需要保存到本地。
比如，用video模拟一个摄像头，通过webrtc调用摄像头的方式拍一张照，然后通过canvas通过getContext("2d")获取的绘图对象CanvasRenderingContext2D的drawImage(video, x, y, width, heigth)方法将video图像通过canvas直接画到html页面上，用来呈现拍照后的结果。
通常的做法是用

的方式上传图片的。但这种方式是要求图片具体存在的，本地或者url路径上的。
现在我们来通过canvas的toDataURL或者toBlob方法、File对象、FormData对象来通过ajax上传图片。

第二种方式，通过base64转码，这里只看js代码
这是canvas调用toDataURL方法将图片base64编码

let base64 = canvas.toDataURL();    // 同样通过canvas的toDataURL方法将canvas图片Base64编码

let bstr = atob(base64.split(",")[1]);    // atob是将base64编码解码，去掉data:image/png;base64,部分
let n = bstr.length;
let u8arr = new Uint8Array(n);

while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}

// 写法同上
let file2 = new File([u8arr], "a.jpg", {type: "image/jpg"})

let formData = new FormData()
formData.append("file", file2)
console.log(formData)

$.ajax({
    url: "/a",
    type: "POST",
    processData: false,
    contentType: false,
    cache: false,
    data: formData,
    success(res) {
        console.log("上传完成!")
    }
})

其上两种写法皆可
下面是后台代码，这里用的是java

@Controller
public class IndexCtronller {

    @RequestMapping(value = "/a", method = RequestMethod.POST)
    public ResponseEntity index(MultipartFile file) {    // 通过MultipartFile对象接收文件
        String contextPath = "C:UsersdaggerDesktop";    // 上传文件路径
        File file1 = new File(contextPath, "a.jpg");
        try {
            file.transferTo(file1);    // 将文件保存到服务器桌面
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

云服务器服务器托管 base64转图像c语言 base64上传oss base64 通过文件管理上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106638.html

blob和base64转文件并通过ajax上传到服务器

摘要：有时候，我们不想通过上传本地图片的方式上传图片，而是通过相机拍照，将这个拍照后的图片直接上传到服务器上，不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。有时候，我们不想通过上传本地图片的方式上传图片，而是通过相机拍照，将这个拍照后的图片直接上传到服务器上，不需要保存到本地。比如，用video模拟一个摄像头，通过webrtc调用摄像头的方式拍一张照，然后通过canva...

bingchen 2019-08-19 10:26 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。一、通过Form表单提交上传 HTML enctype属性必不可少上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...

Luosunce 2019-08-23 10:25 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。一、通过Form表单提交上传 HTML enctype属性必不可少上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...

Lsnsh 2019-08-02 11:04 评论0 收藏0
前端js压缩图片并上传

公司最近有需要压缩上传图片功能，查找了些资料并实现了一把。主要用到的原生组件：FileReader、Canvas、Blob、FormData 逻辑步骤： FileReader.readAsDataURL将上传的图片文件转为Base64格式将img绘制到canvas上，canvas.toDataURL压缩图片 new Blob将压缩后的Base64转为Blob格式 FormData.appen...

peixn 2019-08-21 17:39 评论0 收藏0
JS压缩上传图片

摘要：读取文件文件对象加载图片图片地址的图片转图片转图片对象图片质量到之间缩放比例到之间超过这个值无法生成，在上方式一低版本兼容性差些文件类型文件大小质量大小方式二文件类型文件大小质量大小上传上传的地址文件对象处理上传进度上传中反馈 * @Date: 2016/11/17 0017 * @Time: 10:14 * @Author: lxbin * * Created with ...

luxixing 2019-08-20 12:21 评论0 收藏0