美文网首页
vue-element上传图片压缩包和图片压缩上传

vue-element上传图片压缩包和图片压缩上传

作者: milko1991 | 来源:发表于2022-11-28 16:52 被阅读0次

整体逻辑如下:

element-upload上传图片压缩包 → 解压缩压缩包 → 获取压缩包的图片文件 → 将内存过大的图片进行压缩 → 将压缩之后的图片再次制作成压缩包 → 继续上传操作
先安装image-conversion, jszip模块,用于压缩和解压缩
upload部分
 <el-upload
            class="upload-demo"
            ref="uploadNoMask"
            :action="uploadUrl()"
            :limit="1"
            :show-file-list="true"
            :before-upload="beforeAvatarUpload"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            accept=".zip"
            >
            <div class="t_l">
              <el-button size="small" type="primary">上传压缩包</el-button> 
            </div>
          </el-upload>
引入模块
import * as imageConvsersion from 'image-conversion'
import JsZip from 'jszip'

beforeAvatarUpload方法

 beforeAvatarUpload(file) {
      const _this = this;
      let zip = new JsZip(); //上传的压缩包
      let nZip = new JsZip(); //新的压缩包
      return new Promise((resolve) => {
          let promise = [];
          zip.loadAsync(file).then(res => {
            res.forEach((relativePath, fil) => {
              if(!fil.dir) {
                let pro = _this.getBlob(zip,fil).then(data => {
                  nZip.file(fil.name, data, {binary: true});
                }).catch(err => {

                });
                promise.push(pro);
              }
            });
            Promise.all(promise).then(() => {
              nZip.generateAsync({type: "blob"}).then(content => {
                _this.$message.warning('正在压缩,请稍等~')
                resolve(content);
              })
            })
          })
        })
  },
  getBlob(zip, fil) {
      return new Promise((resolve, reject) => {
        zip.file(fil.name).async("uint8array").then(u8 => {
          let blob = new File([u8], fil.name.split("/")[1]);
          if(blob.size > 409600) {
            imageConvsersion.compressAccurately(blob, {
              size: 400,
              width: 400
            }).then(res => {
              resolve(res);
            })
          }else {
             resolve(res);
          }
        })
      })
    },

功能完成。

相关文章

  • 一次基于electron的图片上传插件的开发过程

    背景: 项目前端有个图片压缩包上传功能,用户上传的时候会选择单反拍摄的巨幅图片,由于前端打不开压缩包,也没法读取压...

  • h5上传图片压缩包服务端解压并上传图片

    CMS后台有上传多个图片的需求,多个图片上传也一样麻烦。就想做个上传压缩包服务端解压上传的东西。 页面 使用h5的...

  • iPic for Mac(图床神器) v1.7.0中文免费版

    上传图片相关设置 上传前压缩图片 可以在 iPic 的 偏好设置 中开启「上传前压缩图片」选项,目前支持压缩的图片...

  • iOS 网络上传图片

    上传图片 构造参数(NSArray *)files 上传图片—压缩 压缩到小于(...

  • Vue上传图片压缩的问题

    上传图片太大,需要前台进行图片压缩上传图片大于100* 1024 的用canvas 来压缩来解决然后IOS拍照上传...

  • iOS 上传图片到服务器

    1.单张图片上传 2.多张图片上传 PS:上传图片前,必须先压缩图片,不然图片过大,可能会导致上传失败!

  • MySQL表设计的思考

    多分类图片识别的项目背景,用户上传包含多个目录的压缩包形成数据集,压缩包中的子目录作为图片分类,机器学习根据用户选...

  • 图片压缩上传

    参考1-HTML5实现图片压缩上传功能参考2-移动前端—图片压缩上传实践参考3-移动端H5图片压缩上传 大体步骤 ...

  • vue 图片压缩

    vue 图片压缩 上传图片大于100* 1024 的用canvas 来压缩来解决 然后IOS拍照上传会有图片旋转的...

  • afn进行单图或多图上传

    图片上传时必要将图片进行压缩,不然会上传失败 1.单张图上传 AFHTTPRequestOperationMana...

网友评论

      本文标题:vue-element上传图片压缩包和图片压缩上传

      本文链接:https://www.haomeiwen.com/subject/yttrfdtx.html