js中base64转为file文件上传至服务器得到的是什么文件,没有后缀

因为在vue中想压缩图片上传,所以将文件先转换为base64,压缩转换为文件上传至oss平台

1.可是现在oss平台的得到的文件是如下的文件。就连后缀都没有不过输入oss中的链接是可以看到图片的。
2.我将文件下载至本地,双击文件却被告知文件不存在,搞得删除都删不了。但是明明在桌面上。
3.base64转为文件 我console出来明明是个img的file, 怎么做到上传至oss是图片文件。而不是现在这样
clipboard.png

clipboard.png

clipboard.png

//创建一个reader
            let reader = new FileReader();

            //将图片转成base64格式
            reader.readAsDataURL(files[i]);
            //读取成功后的回调
            reader.onloadend = function() {
              let result = this.result;
              let img = new Image();
              img.src = result;
              // console.log("********未压缩前的图片大小********");
              // console.log(result.length);
              img.onload = function() {
                let data = self.compress(img);
                self.imgUrl = result;

                let blob = self.dataURItoBlob(data);
                self.file[self.file.length] = blob;
                if(self.file.length == self.all) {
                  var formData = new FormData();
                  for (var j = 0; j < self.file.length; j++) {
                    formData.append("file[]", self.file[j]);
                  }

                  self.tirggerFile(formData);
                }
                
                
                
  compress(img) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    let initSize = img.src.length;
    let width = img.width;
    let height = img.height;
    canvas.width = width;
    canvas.height = height;
    // 铺底色
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, width, height);

    //进行最小压缩
    let ndata = canvas.toDataURL("image/jpeg", 0.1);
    // console.log("*******压缩后的图片大小*******");
    // console.log(ndata)
    // console.log(ndata.length);
    return ndata;
  },
  // base64转成bolb对象
  dataURItoBlob(base64Data) {
    var byteString;
    if (base64Data.split(",")[0].indexOf("base64") >= 0)
      byteString = atob(base64Data.split(",")[1]);
    else byteString = unescape(base64Data.split(",")[1]);
    var mimeString = base64Data
      .split(",")[0]
      .split(":")[1]
      .split(";")[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], { type: mimeString });
  },
                
                
阅读 5k
1 个回答

上传oss时,你指定文件后缀名了吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题