vue简单上传图片，压缩图片功能实现（js原生通用）

最新推荐文章于 2025-03-21 11:55:20 发布

就像风1样

最新推荐文章于 2025-03-21 11:55:20 发布

阅读量4.7k

点赞数

分类专栏： Vue HTML5 JavaScript vue专栏文章标签：上传图片压缩图片

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/94129934

版权

该博客分享了如何在Vue项目中实现图片上传并利用canvas进行图片压缩的功能。当图片宽度超过1000px时，会触发压缩过程。提供了JS原生和Vue的完整代码示例链接，以及更多Vue开发技巧的专栏链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以先看只有上传图片的

js完整demo https://blog.youkuaiyun.com/qq_42221334/article/details/84827369

vue 完整demo https://blog.youkuaiyun.com/qq_42221334/article/details/93198417

参考上传图片添加了canvas 方法压缩图片，判断图片宽度大于1000时进行压缩

methods: {
    //传图
    xmTanUploadImg(){
      var that=this
      var obj=document.getElementById("xdaTanFileImg");//获取元素的dom
      var file = obj.files[0];               
      var reader = new FileReader();
      reader.onload = function (e) {
         // 此处 e.target.result 能获取图片 不压缩时直接赋值给图片的src即可
        

        //此处为压缩图片方法
        let image = new Image() //新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result
        image.onload = function() {
          var canvas = document.createElement('canvas'), 
          context &