vue上传图片（先上传到本地，提交时上传到服务器）

最新推荐文章于 2025-05-19 10:57:36 发布

转载最新推荐文章于 2025-05-19 10:57:36 发布 · 890 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/miaSlady/p/9238321.html

文章标签：

#javascript #后端 #c# #ViewUI

本文介绍了一种在前端实现图片上传、预览及压缩的方法。通过使用FileReader API读取图片文件并转换为Base64编码，再利用Canvas进行图片尺寸调整与质量压缩，最后将压缩后的图片转换为Blob格式以便于表单提交。

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

1.上传图片的地方

<input type="file" @change="Preview($event)" accept="image/*" ref="showinput">
2.调用方法

//input 发生改变的时候触发
Preview(ev){
    // const self=this;
    const file=ev.target.files[0];
    this.imgObj=ev.target.files[0];
    let obj=new FileReader();
    obj.readAsDataURL(file);
    // obj.onload=function(){
    //   self.img=obj.result;
    // }
    obj.onload=()=>{
        this.picReduce(obj.result,base64=>{
            this.img=base64
        });
    };
},

// 图片压缩
picReduce(picObj,callback){
    let img = new Image();
    img.src=picObj;
    img.onload=()=>{
        const w=img.width;
        const h=img.height;
        const scale = w/h;
        const max_w=w>1080?1080:w;
        const max_h=h*max_w/w;
        let canvas=document.createElement("canvas");
        let ctx = canvas.getContext('2d');
        canvas.width=max_w;
        canvas.height=max_h;
        ctx.drawImage(img,0,0,max_w,max_h);
        var base64 = canvas.toDataURL('image/jpeg', 0.7);
        callback(base64)
    }
},
3.提交时（用form表单提交）

let _self=this;
var fd = new FormData();
let blob1 = this.dataURItoBlob(this.img);
fd.append("physicalTestImg",blob1);
$http.activity618SignUp(fd,function(msg){
    if(msg.success){
        _self.Toast(msg.alertMsg);
    }else{
        _self.Toast(msg.alertMsg);
        this.isSubmit=false;
    }
})

转载于:https://www.cnblogs.com/miaSlady/p/9238321.html