vue+axios上传文件的几种方式及步骤(以上传图片为例)

vue+axios上传文件的几种方式及步骤(以上传图片为例)1、用js的formData对象上传(服务器返回url地址)<inputclass=”file”name=”file”type=”file”accept=”image/png,image/gif,image/jpeg”@change=”update”/>methods:{update(e){letfile=e.targe…

大家好,又见面了,我是你们的朋友全栈君。

1、用js的formData对象上传(服务器返回url地址)

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

methods: {
      update(e){
        let file = e.target.files[0];
        let param = new FormData(); //创建form对象
        param.append('file',file);//通过append向form对象添加数据
        console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
        let config = {
          headers:{'Content-Type':'multipart/form-data'} //这里是重点,需要和后台沟通好请求头,Content-Type不一定是这个值
        }; //添加请求头
        axios.post('http://127.0.0.1:8081/upload',param,config)
          .then(response=>{
            console.log(response.data);
          })
      }
    }

vue+axios上传文件的几种方式及步骤(以上传图片为例)

2、Form表单上传(服务器返回url地址)

<form>
    <input type="text" value="" v-model="name" placeholder="请输入用户名">
    <input type="text" value="" v-model="age" placeholder="请输入年龄">
    <input type="file" @change="getFile($event)">
    <button @click="submitForm($event)">提交</button>
</form>
	data: {
          name: '',
          age: '',
          file: ''
        },
        methods: {
          getFile(event) {
            this.file = event.target.files[0];
            console.log(this.file);
          },
          submitForm(event) {
            event.preventDefault();
            let formData = new FormData();
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);
 
            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
 
            axios.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
              if (response.status === 200) {
                console.log(response.data);
              }
            })
          }
        }

注意:表单form加上属性enctype=”multipart/form-data”。客服端发送的头部就是:

Content-type: multipart/form-data, boundary=AaB03x--AaB03x//后面这个是浏览器假的随机值

提交成功客服端还能看到以下图片相关内容:

vue+axios上传文件的几种方式及步骤(以上传图片为例)

3、获取相机图片的base64

    /**
     * 获取用户拍照的图片信息
     */
    async Photograph() {
      // 获取用户拍照的图片名字,显示到页面上
      this.fileName = this.$refs.photoref.files[0].name;
      // 获取图片base64 代码,并存放到 base64ImgData 中
      this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);
    },
    /**
     * 返回用户拍照图片的base64
     */
    FileReader(FileInfo) {
      // FileReader 方法参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
      let reader = new FileReader();
      // readAsDataURL 方法参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
      reader.readAsDataURL(FileInfo);
      // 监听读取操作结束
      /* eslint-disable */
      return new Promise(
        resolve => (reader.onloadend = () => resolve(reader.result))
      );
    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151185.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • Frp内网穿透

    Frp内网穿透Frp内网穿透​ 内网穿透从本质上来讲也是端口映射,两者都是将内网地址映射到公网可访问的地址,而区别是端口映射直接在路由器中配置即可,而内网穿透配置的端口映射则需要客户端和服务端进行绑定后实现,相当于客户端和服务端之间建立了一条隧道,然后访问服务端的请求会通过隧道转发给内网主机,该情况多用于没有公网IP的情况下使用;​ frp是一个高性能的反向代理应用,可以轻松地进行内网穿透,对外网提供服务,支持tcp,udp,http,https等协议类型,可以将内网服务以安全、便捷的方式通过具有公网

  • java编译和运行

    java编译和运行java应用程序的基本结构 编写源文件 保存源文件 额外附加 编译器(javac.exe) 解释器(java.exe)总结:假如我的B.java源文件在C:\Users\AUSU\Desktop\ts里面一般都是进入到这个目录里面编译解释编译:javacB.java解释:javaB注意:解释不可能以带目录的方式去运行程序,编译可以零…

  • Javascript childNodes用法

    Javascript childNodes用法//定义函数getInfo(),用于获取小节的详细信息functiongetInfo(){//使用getElementById()方法获取元素以及元素varlist=document.getElementById(“list”); //使用childNodes数组导航到相应的小节 varnode=list.childNodes; alert(node.

    2022年10月23日
  • android+应用开发揭秘+pdf,Android应用开发揭秘_部分5.pdf「建议收藏」

    android+应用开发揭秘+pdf,Android应用开发揭秘_部分5.pdf「建议收藏」ClicktobuyNOWPDFXChangewwwdocutrackcomClicktobuyNOWPDFXChangewwwdocutrackcomClicktobuyNOWPDFXChangewwwdocutrackcom…

  • mpc hc设置_mpc是指什么

    mpc hc设置_mpc是指什么MPC-HC播放器设置启动 MPC-HC ,先设置语言:(最新版本会自动选择对应的系统语言)View-Language-Chinese=>界面变为中文进 视图-选项:播放器:建议勾选「保存设置至.ini文件中」格式:建议勾选全部视频类格式,其中 QuickTime 建议采用「DirectShow」滤镜(双击右侧,在下拉框中即可选择),播放性能会

  • 算法之记忆化搜索_艾宾浩斯记忆曲线的算法实现

    算法之记忆化搜索_艾宾浩斯记忆曲线的算法实现记忆化搜索其实就是暴力搜索的过程中保存一些已经计算过的状态(思想类似于动态规划,保存计算过的状态),在暴力搜索的过程中利用这些计算过的状态从而减少很大程度上的计算,从而达到时间复杂度上的优化。1【问题描述】 小明想知道,满足以下条件的正整数序列的数量: 1.第一项为n; 2.第二项不超过n; 3.从第三项开始,每一项小于前两项的差的绝对值。 请计算,对于给定的n,有多少种满足条件的序列。【输入格式】 输入一行包含一个整数n。【输出格式】 输出一个整数,表示答案。答案可能很大

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号