使用plupload压缩图片

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。

Plupload有以下功能和特点:

1、拥有多种上传方式:HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式,Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。

我们在上传图片的时候,图片有大有小,图片过大上传至服务器端会占用大量的服务器内存,所以我们在前端上传图片时就会先对图片进行压缩处理,使用plupload上传,在实例化一个plupload对象时,传入配置参数resize

// 可以使用该参数对将要上传的图片进行压缩,该参数是一个对象,里面包括5个属性:

// width:指定压缩后图片的宽度,如果没有设置该属性则默认为原始图片的宽度

// height:指定压缩后图片的高度,如果没有设置该属性则默认为原始图片的高度

// crop:是否裁剪图片

// quality:压缩后图片的质量,只对jpg格式的图片有效,默认为90。quality可以跟width和height一起使用,但也可以单独使用,单独使用时,压缩后图片的宽高不会变化,但由于质量降低了,所以体积也会变小

// preserve_headers:压缩后是否保留图片的元数据,true为保留,false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点

// resize参数的配置示例如下:

resize: {
  width: 100,
  height: 100,
  crop: true,
  quality: 60,
  preserve_headers: false
}

width与height的单位为像素(px),在实际使用过程中, 我们往往不能控制图片的宽高尺寸,而在resize参数配置中又不能使用%,否则会抛异常,为了符合我们要等比例缩放图片的效果,我在使用中只使用width、crop、preserve_headers参数,如下:

resize: {
  width: 1000,
  crop: false,
  preserve_headers: true
}

这里宽度我使用的1000,意思就是如果图片宽小于1000,则不会改变原图片大小,只是删除元数据进行图片压缩,若图片宽度大于1000,则会等比例缩放图片进行压缩。

(第一次写博客,不喜勿喷,谢谢)

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Vue3中使用Plupload的步骤如下: 1. 首先,你需要在项目中引入Plupload。你可以通过在GitHub上下载并安装Plupload,或者使用npm install --save plupload命令安装Plupload依赖。 2. 在Vue组件中实例化一个Plupload对象,并传入一个配置参数对象来进行各种配置。你可以根据需要配置上传方式、限制文件类型、压缩图片等功能。 3. 调用Plupload实例对象的init()方法进行初始化。这将初始化Plupload并准备好进行文件上传。 4. 在Plupload实例对象上注册你需要的事件。Plupload提供了多种事件,可以在文件选取、上传进度、上传完成等不同阶段与Plupload进行交互。 以下是一个在Vue3中使用Plupload的示例代码: ```vue <template> <div> <plupload :file-list="theDialogForm.attachJsonArr" :limit="1" biz-type="trainModule" accept-files=".zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp" @onChange="handleFileChange" /> </div> </template> <script> import Plupload from 'plupload' // 引入Plupload库 export default { data() { return { theDialogForm: { attachJsonArr: [] // 文件列表 } } }, mounted() { const uploader = new Plupload({ // 实例化Plupload对象 // 配置参数 }) uploader.init() // 初始化Plupload // 注册事件 uploader.bind('FilesAdded', (uploader, files) => { // 当文件添加到上传队列时触发的事件 }) // 更多事件... }, methods: { handleFileChange(fileList) { console.log('handleFileChange', fileList) } } } </script> ``` 以上代码示例中,我们在Vue组件中引入了Plupload库,实例化了Plupload对象,并在mounted钩子函数中进行了初始化和事件的注册。同时,我们定义了一个handleFileChange方法来处理文件变化事件。你可以根据自己的需求进行相应的配置和事件处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值