vue上传图片并压缩

骑猪看日落 2023-03-13 06:22 4阅读 0赞

**需求：点击用户头像选择本地图片压缩上传到服务器**

这里用vant UI组件的Uploader 文件上传

*  按需加载 Uploader

import {Uploader} from 'vant';
    Vue.use(Uploader)

*  在dom上

<van-uploader :after-read="updateFile" accept="image/jpg" :max-size="10485760" @oversize="fileMax">
            <img :src="imgLink+userInfo.pic" class="userImg"/>
            <img src="../../assets/image/mine/photo.png" class="photo-img">
          </van-uploader>

*  fileMax方法是文件超出时提示

fileMax(msg){
            this.$toast.fail("请选择小于10M的图片")
            return
          },

*  updateFile是文件读取完成后的回调函数

在这里处理压缩后上传服务器逻辑

updateFile(file){
            lrz( file.file, {
              width : 300,
              quality: 0.4    //图片压缩质量，取值0-1，默认为0.7
            }).then((rst) => {
                //成功时执行
                console.log('成功',rst)
                
              //上传文件流数据
              //上传参数为formData对象
              uploadFile(rst.formData).then(res=> {
                //上传成功
              })
              }).catch((error) => {
              console.log('失败',error)
              //失败时执行
            }).always(() =>{
              //不管成功或失败，都会执行
            })
          },

这里压缩使用的插件是lrz

先安装：npm i lrz

然后在组件使用：import lrz from 'lrz'

![format_png][]

[format_png]: /images/20230312/88acd1fe0253467490aed4b0b39d837c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue上传图片并压缩

需求：点击用户头像选择本地图片压缩上传到服务器这里用vant UI组件的Uploader 文件上传按需加载 Uploader import {Uplo

骑猪看日落/ 2023年03月13日 06:22/ 0 赞/ 5 阅读

相关 uni-app 上传图片并压缩（uView)

<view class="" style="background: fff;padding: 22upx 0;margin-top: 16upx;"> <vi

柔光的暖阳◎/ 2022年09月03日 00:25/ 0 赞/ 1051 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 248 阅读

相关图片上传前压缩，base64图片压缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

你的名字/ 2022年05月18日 00:58/ 0 赞/ 282 阅读

相关 vue 压缩图片预览并上传（promise封装）

主要用到filereader、canvas 以及 formdata 这三个h5的api 过程大致分为三步： 1. 用户使用input file上传图片的时候，用file

男娘i/ 2022年03月30日 15:42/ 0 赞/ 498 阅读

相关 localResizeIMG:图片压缩上传

vant-ui Uploader 图片上传组件 + localResizeIMG 实现图片压缩上传：一、npm安装： npm install lrz复制代码

客官°小女子只卖身不卖艺/ 2022年01月20日 04:59/ 0 赞/ 410 阅读

相关前端上传图片并初步压缩图片

上传图片和压缩前端处理用户图片, 控制上传图片的大小, 减轻服务器流量压力首先通过input获取图片 <input type="file" ac

小鱼儿/ 2021年12月15日 08:17/ 0 赞/ 479 阅读

相关 JQ图片压缩上传

css { margin: 0; padding: 0; } li {

以你之姓@/ 2021年09月16日 11:54/ 0 赞/ 523 阅读

相关 java 上传图片并压缩图片大小

Thumbnailator 是一个优秀的图片处理的Google开源Java类库。处理效果远比Java API的好。从API提供现有的图像文件和图像对象的类中简化了

电玩女神/ 2021年09月12日 06:44/ 0 赞/ 557 阅读

相关 flutter压缩图片上传

前言：在android原生中比较常用的是luban压缩，当然，flutter版本也有luban压缩，通过一些资料搜索，luban压缩是直接通过dart进行压缩的，

落日映苍穹つ/ 2021年09月03日 10:47/ 0 赞/ 880 阅读