一、Vue文件上传

<template>

      // label的属性for就是要触发的Input id，点击label，上传文件

      <label for="file">

           <input  type="file"  id="file"

              //隐藏 input

              style="display:none"

              //点击上传后触发onchange事件

             @change="getImage($event)"

             // 用ref属性进行注册，以便在Vue中直接操作DOM元素

              ref="inputer"

            // 限制上传文件格式

              accept="image/png, image/jpeg, image/gif, image/jpg"

            />

            <img  :src="url" alt class="userImg" />

      </label>

</template>

<script>

export default{

       data{

         //vue中的js引入图片，必须require进来 或者引用网络地址

        url: require("default.png"),

       }

        methods:{

            getdImage(){

//引用父组件的 $refs对象:refs.refsName.files[0],获取到相关元素

                 let  data=this.refs.inputer.files[0];

               //为序列化表以及创建与表单格式相同的数据（用于XHR传输）提供便利。

                 let  parms=new FormDate();

                //将data添加进parms

                 parms.append( "image", data);

               //调用uploadImage函数上传图片

                 this.uploadImage(parms);

          }

            uploadImage{

//将图片发送给接口，接口路径    文件     发送后执行函数                         

                 this.$axios.post("edit_img", parms).then(res => {

     //成功后执行函数

                        if (res.data.code == 1) {

     //失败后执行函数（一般是返回错误msg）

                         } else {

                         }

                   });

            }

    }

}

</script>

二、Vue与ref属性与refs

          ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

三、FormData

FormData的主要用途有两个：

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

2、异步上传文件!important

FormData VS Json

格式

FormData 是“键值对”的数据格式，例如：

a=1&b=2&c=3

而 Json 格式则与之不同，如下：

{"a":1,"b":2,"c":3}

传输数据特点

FormData可以传文件

Json保持结构和类型

前后端传输对比

FormData（单向）

前端 ==>后端：json格式
后端 ==>前端：json格式

Json（双向）

前端 ==>后端：FormData格式

后端 ==>前端：json格式

如果传递的数据比较简单，两种方式基本上没什么大区别（当然后台接收数据的方式肯定是不同的）。

如果数据比较复杂，比如包含数组、对象等时，就只有json才能胜任了。

如果是通过ajax发送数据，则最好使用json，因为可以通过简单的方法把对象转换为json字串。

如果数据是通过表单提交的，那么当然使用默认的form即可，因为它会自动构建数据结构，无需手工拼接；

四、后人乘凉（码起来慢慢研究）