vue框架实现文件上传功能

1将input的type指定为file并设置为隐藏，使用点击事件去触发input，写两个点击方法只是为了区分类型而已。

2选择想要的文件后将会返回个formData数据，只需要新建个fromData变量，然后赋值即可。

3请求方式是基于axios做全局封装，将格式定义好再将formData传给post请求回调就行了，因文件名是写死展示的，故省去执行更新数据问题。

ps：参考来源（ >

1必须是post请求，需要设置headers: {'Content-Type':'multipart/form-data'},在这个前提下才能文件上传。

2你的文件上传 <input type="file" @change="getFile($event)"/>

外层要有 <form enctype="multipart/form-data" name="fileinfo" id="myForm"></form>

3 <input type="file" @change="getFile($event)"/> 的change方法很重要，要记得加上，是用来获取选择的文件的信息数据。

4参数传递要这么处理：把接口的所有参数通过这个方式加到params里。这样在控制台看到的参数格式才是对的，如下图。

这里遇到一个坑，就是不这么处理，而是简单的formData = params这么传递，auth_user_file看到是｛｝，虽然选择文件时在控制台能看到信息，但是作为接口参数传递时就为{};

5因为我们这个项目的文件上传项不是必填，也可以选择手动输入，如果没有选择文件，建议这么处理。

-- headers: { 'Content-Type': 'application/x->

在xxx信息管理这种业务场景中我认为最常见的 *** 作就是对字段的处理(例如查询、编辑等区域的表单、图表的列名、表格的列名)，而字段恰恰是最为 '规范的'，它有自己的名称、类型

用对象或者说map这种结构而不用数组是为了可以精准对某个字段进行设置 而数组需要先遍历查找到这个字段再进行设置

可通过 formData 这个外部传入的对象来对数据进行统一的设置与读取

例如有的字段可以查询但不能编辑，我们可以引入一个场景的概念就可以轻易解决这个问题

名称既可以显示又可以编辑与查询而性别只能编辑与查询但不能显示，useScene是使用场景如果字段不支持这个场景那么字段不予显示(可自行实现禁用场景)

重点就在于m_canUse的实现，它用eval取巧的实现了一个场景逻辑字符串转布尔值的一个骚 *** 作

看到这里可能有的朋友会很不解，为什么我要构造一个如此复杂的useScene,直接定义 canUpdate canQuery 这种布尔值变量来指定场景不就行了吗

实际上需求是非常复杂多变的，场景可以说是无限的甚至是相互交织关联的、我们可能会根据用户的 *** 作动态显示字段的显示隐藏，例如提交后显示提交人、提交时间等字段、撤销了就不予显示

我们可以在用户做某些 *** 作时来动态设置sceneMap的状态来达到控制表单的显示、隐藏、禁用，当状态越复杂时你就越能感觉到它的威力

可以在动态表单内部监听表单的事件(可查阅相关UI库文档)、当表单事件触发时对外传递事件(携带当前 *** 作的字段信息、$event信息或arguments)

有时我们想在任意两个字段之间插入一个非通用的ui组件，我们可以通过具名插槽来实现

这是一个动态表单的简易实现，需要大家结合自身的业务场景去填充各种各样的表单和相关的参数、事件

this$axiosget("你的请求地址")then(res => {//获取你需要用到的数据})

例如请求分页列表    

this$axiosget("你的请求地址",

            {   

                     params:{    

                                           pageSize: thispagesize,（在data中定义好的）

                                            pageNum: thiscurrentPage,（在data中定义好的）

                                   }

               }

    )then(res => {//获取你需要用到的数据});

21拼接、Content-Type：application/json

        axiospost("你的请求地址",,'name=xxxx&num=xxxxxx')then(resp=>

                {

                    consolelog(resp);

                    thisjosarr=respdatajokes//数据赋值 

                }

22json对象提交数据

let data = {

        'user':"admin" ,

        'hideFlag': '1',

        'content': thiscontent,

        'pictureUrl': thisimgUrl

      }

     this$axios

              post('"你的请求地址"', data)

              then((res) => {

                consolelog(res)得到你想要的数据    

23 通过FormData表单形式传递参数（通过键值对的表单形式传递数据）

       formData：{    

                                user:lili;

                                pass:12345678

                            }

      let formData= thisformData

            this$axios

              post('你的请求地址', form)

              then((res) => {

                 consolelog(res)得到你想要的数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $routeparamsid 获取文章数据

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter守卫中获取数据，当数据获取成功后只调用 next 方法。

其中说到跨域的话首要的就是axios的配置

主要原因是后台使用的是Multipart数组接收，vue这边使用的是formdata，红框一定要这样写，我被坑了好久，并且传输文件类的时候，不需要设置contentType，由于我用axios共同全局设置了这个 'Content-Type': 'multipart/form-data' 之后导致浏览器解析的时候，没有这个boundry（见图），最后还是用了vue-resource中的>

以上就是关于vue框架实现文件上传功能全部的内容，包括:vue框架实现文件上传功能、vue最简单el-upload上传formdata带参数、Vue 表单提交 -- 文件上传等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！