zoukankan      html  css  js  c++  java
  • vue上传图片到服务器

    https://blog.csdn.net/qq_29712995/article/details/78839093(copy)

    HTML代码:

    <input accept="image/*" name="img" id="upload_file" type="file">
    JS代码:

    var file = document.getElementById("upload_file").files[0];
    var r = new FileReader(); //本地预览
    r.onload = function(){
    console.log(r.result);//图片的base64
    }
    r.readAsDataURL(file); //Base64
    2.通过form表单提交。

      form表单提交图片会刷新页面,也可以是form绑定到一个隐藏的iframe上,可以实现无刷新提交数据。

    HTML代码:

    <input accept="image/*" name="img" id="upload_file" type="file">
    JS代码:

    import axios from 'axios'

    var file = document.getElementById("upload_file").files[0];
    var formdata1=new FormData();// 创建form对象
    formdata1.append('img',file,file.name);// 通过append向form对象添加数据,可以通过append继续添加数据
    //或formdata1.append('img',file);
    let config = {
    headers:{'Content-Type':'multipart/form-data'}
    }; //添加请求头
    axios.post('/xapi/upimage',formdata1,config).then(response)=>{ //这里的/xapi/upimage为接口
    console.log(response.data);
    })
    这里注意的是,设置 的Content-Type

    查看是否成功:按F12-network-点击对应的那个请求

    可以看到


    ---------------------
    作者:小江_
    来源:CSDN
    原文:https://blog.csdn.net/qq_29712995/article/details/78839093
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    常用正则总结
    JavaScript中with语句的理解
    设置点击文本框或图片弹出日历控件
    设置时间 new Date
    windows 下配置 nginx的问题
    CSS3滚动条-webkit-scrollbar
    /、./、../ 的区别
    js中如何获取纯正的undefined?
    关于渐进增强和优雅降级
    每日一练-第三期
  • 原文地址:https://www.cnblogs.com/dianzan/p/10678363.html
Copyright © 2011-2022 走看看