【vue】如何压缩图片之后传给后端

简介: 【vue】如何压缩图片之后传给后端

最近项目要求可以上传更换图片,由于手机中的图片普遍比较大,所以要经过压缩之后实现,下面是实现的代码

html

长按事件触发弹框

<van-action-sheet
      v-model="showBottom"
      :actions="actions"
      bind:close="onClose"
      @select="onSelect"
      @close="onClose"
    />

上传input-div

 <!-- 添加新图 -->
    <span>
      <input
        id="file"
        type="file"
        multiple="multiple"
        @change="changeAdd($event)"
        v-if="clearShow"
        hidden
      />
    </span>

script

长按按钮

  /**
     * 照片组件-长按-选择
     * @author 苑仁杰
     */
    onSelect(item) {
      var name = item.name;
      if (name == "在线搜图") {
        this.searchImage();
      }
      if (name == "添加新图") {
        this.upload();
      }
      this.showBottom = false;
    },

点击一个按钮触发上传div的点击事件

/**
     * 长按-添加新图
     * @Date: 2019年11月4日15:26:11
     * @author 苑仁杰
     */
    upload() {
      const mybutton = document.getElementById("file");
      mybutton.click();
    },

触发上传图片方法

 /**
     * 上传图片
     */
    changeAdd(e) {
      console.log(e);
      var vm = this;
      this.deviceArray = [];
      let deviceFile = e.target.files;
      let file = deviceFile[0];
      vm.compress(e, file);
    },

图片压缩

 // 对图片进行压缩
    compress(e, file) {
      var vm = this;
      vm.fileName = file.name;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        let image = new Image(); //新建一个img标签(还没嵌入DOM节点)
        image.src = e.target.result;
        image.onload = function() {
          let canvas = document.createElement("canvas"),
            context = canvas.getContext("2d"),
            imageWidth = image.width / 2, //压缩后图片的大小
            imageHeight = image.height / 2,
            data = "";

          canvas.width = imageWidth;
          canvas.height = imageHeight;

          context.drawImage(image, 0, 0, imageWidth, imageHeight);
          data = canvas.toDataURL("image/jpeg");

          var arr = data.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          let filePress = new File([u8arr], vm.fileName, { type: mime });
          vm.fileData = filePress;
          vm.beforeRead(vm.fileData);
        };
      };
    },

上传之前判断格式大小,然后发送请求

 /**
     * 上传图片之前判断图片是否符合条件
     */
    beforeRead(file) {
      var vm = this;
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$toast("请上传 jpg/png 格式图片");
        vm.isUpload = false;
      }
      let isLt1M = file.size / 1024 / 1024 <= 1;
      if (!isLt1M) {
        this.$toast("图片大小1M以内");
        vm.isUpload = false;
      }
      if (vm.isUpload) {
        let formData = new FormData();
        formData.append("multfile", vm.fileData);
        vm.clearShow = false;
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        vm.$axios
          .post("word/upLoad" + "?word=" + vm.word, formData, config)
          .then(
            res => {
              vm.wordPicture[vm.whichIndex] = [];
              vm.wordPicture[vm.whichIndex] = res.data.data;
              vm.fileData = null;
              vm.clearShow = true;
            },
            () => {
              vm.clearShow = true;
            }
          );
      }
    },


目录
相关文章
|
5月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
503 1
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
863 5
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
236 4
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
143 1
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
710 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
2656 0
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
241 0
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
329 5
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践

热门文章

最新文章