zoukankan      html  css  js  c++  java
  • vue上传图片(先上传到本地,提交时上传到服务器)

    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;
    }
    })


  • 相关阅读:
    CentOS 6.5通过yum的方式安装MySql
    Hbase集群搭建
    Thread类的常见问题
    关hashMap跟hashTable的区别
    mysql 循环插入100w
    Centos 多个mysql数据库
    CentOS 搭建 FastDFS-5.0.5集群
    RPC
    dubbo简述
    自己去看dubbo源码
  • 原文地址:https://www.cnblogs.com/miaSlady/p/9238321.html
Copyright © 2011-2022 走看看