当前位置： 移动技术网 > IT编程>开发语言>Jquery > 前台页面上传data image图片,java后台接收图片保存

前台页面上传data image图片,java后台接收图片保存

2018年08月23日  | 移动技术网IT编程  | 我要评论

最近在项目中有这么一个需求，就是上传一个视频文件，然后要获取视频文件的第一帧图片，这个可以通过canvas获取得到，得到的是一个dataurl,之后还要将这个图片上传到云，这个时候如何操作就不清楚了，于是乎，google一番，总结如下：

  1. 将dataurl转成blob
  2. 利用formdata
  3. 异步上传
 
function b64toblob(b64data, contenttype='', slicesize=512) {
        const bytecharacters = atob(b64data);
        const bytearrays = [];

        for (let offset = 0; offset < bytecharacters.length; offset += slicesize) {
            const slice = bytecharacters.slice(offset, offset + slicesize);

            const bytenumbers = new array(slice.length);
            for (let i = 0; i < slice.length; i++) {
                bytenumbers[i] = slice.charcodeat(i);
            }

            const bytearray = new uint8array(bytenumbers);

            bytearrays.push(bytearray);
        }

      const blob = new blob(bytearrays, {type: contenttype});
      return blob;
}

 

// dataurl to blob

// 假设一个dataurl
const imageurl = "转成base64的变量";

// split the base64 string in data and contenttype
const block = imageurl.split(";");

// get the content type of the image
const contenttype = block[0].split(":")[1];// in this case "image/jpeg"

// get the real base64 content of the file
const realdata = block[1].split(",")[1];// in this case "r0lgodlhpqbeapeoajosm...."

// convert it to a blob to upload
var blob = b64toblob(realdata, contenttype);
// new a formdata

const formdata = new formdata();
formdata.append('blob', blob);
// upload

$.ajax({
    url:url,
    data: formdata
    type:"post",
    contenttype:false,
    processdata:false,
    error:function(err){
    },
    success:function(data){
    },
});

 

 后台接受代码

@requestmapping(value = "/uploadimage")
@responsebody
public apimessage uploadimage(multipartfile file, httpservletrequest request) {
　　try {
　　　　//自定义处理图片保存方法
　　　　return apimessage.succeed(utils.getimageurl2(file));
　　} catch (exception e) {
　　　　return apimessage.error();
　　}
}

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网