formdata

前端js部分 changeEvent (e) { ------ //change事件方法 let oFile = e.target.files[0] ------ //获取文件对象 let param = new FormData() ------ //new一个formData param.append('file', oFile, oFile.name) ------ //将文件添加到formdata中 param.append('chunk', '0') let config = { headers: {'Content-Type': 'multipart/form-data'} } this.axios.post('/api/upload/upavatar?username=' + username, param, config) ------//传输数据 .then(response => { if (response.data.data === 1) { ------ //成功后的回掉 let instance = Toast({ message: '头像更改成功' }) setTimeout(() => { instance.close() }, 1000) } }) } 　　 NodeJS部分 需要引入formidable、path模块 router.post('

上传图片接口 // 上传图片 export const uploadBanner = formData => { return axios.request({ url: 'manage/slideshow/save', headers: {'Content-Type':'multipart/form-data'}, data: formData, method: 'post' }) } 接口调用 let formData = new FormData(); formData.append('image',this.selectFile); formData.append('level',this.imgIndexUpload); uploadBanner(formData).then(res => { console.log(res.data); if(res.data.code == 200){ this.$Message.success(res.data.message); } else { this.$Message.success(res.data.message); } }).catch(err => { console.log(err) }) 来源： https://www.cnblogs.com/hzx-5/p/9995905.html

html部分，可以把input file的opacity设置为0，点击其父容器，即触发file <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update($event)"/> axios的post请求，发送form数据部分，这样就可以无刷新的提交form数据到后台 　　　　　　　update(e){ let file = e.target.files[0]; let param = new FormData(); //创建form对象 param.append('tweetPic',file,file.name);//通过append向form对象添加数据 //param.append('chunk','0');//添加form表单中其他数据 //console.log(param.get('tweetPic')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去 let config = { headers:{'Content-Type':'multipart/form-data'} }; //添加请求头 axios.post('url/',param,config) .then(response=>{

<template> <div> <div class="input-div" v-show="formData.phone"> <input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="验证码"> <button @click="getCode(formData)" class="code-btn" :disabled="!show"> <span v-show="show">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> </button> </div> </div> </template> <script> import $ from 'jquery' const TIME_COUNT = 60; export default{ data(){ return { formData: { phone:'15933527109', code:'', }, show: true, count: '', timer: null, } }, methods:{ getCode(formData){ if (!this.timer) { this.count = TIME

1.网址：https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --save-dev babel-preset-es2015 .babelrc { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "es2015", "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "es2015", "stage-2"], "plugins": ["istanbul"] } } } 3.使用 // 引入组件 import Uploader from 'vux-uploader' // 子组件 export default { ... components: { ... Uploader, ... } ... } // 使用组件 <uploader :max="varmax" :images="images" :handle-click="true" :show-header=

js: // 定义变量var formData = {}; // 获取表单所有字段和相应值 装填到formData变量中 var fields = $("[data-field]"); fields.each(function (index, item) { if ($(item).hasClass("textbox-f")) { $(item).next().find(".textbox-value").each(function (index2, item2) {　　　　　　　// 根据dom节点的自定义属性[data-field]来定义json对象的属性名 formData[item.dataset.field] = item2.value; 　　　　　　// 若组件为combobox或combo或combogrid或combotreegrid则会获取到所选项的value值，非text值　　　　　}); 　　} else { 　　　　　if ($(item).attr("data-fordom") != undefined) { 　　　　　　　// 获取easyui-combobox所选项的text值，根据input标签上自定义属性[data-fordom]指定的dom节点id,获取下拉框文本 formData[item.dataset.field] = $("#" +

做文件上传时用到了formData 对象，特此整理总结一下 FormData 对象的使用： 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件。 //表单示例 <form id="Form" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> </form> //方法示例 // 获取页面已有的一个form表单 var form = document.getElementById("Form"); // 用表单来初始化 var formData = new FormData(form); 操作方法 1.获取值　　　　　　通过.get(key)/.getAll(key)来获取对应的value 2 添加数据　　　　 通过.append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾 3.设置修改数据　　　.set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值 4

--请求超时 timeout与超时监听ontimeout --后台休眠--sleep(10);//10秒 --图5 ---进度条---上传多个文件 <progress min='0' max='100' value='60'></progress> <input type="file" class="tempFile" multiple>---可多个文件上传 进度回调函数-已经上传的除以总的 图6 ---三级联动 图7 监听下拉框-获取下标- shengSelect.onchange = function(eve){ console.log(eve.target.selectedIndex);//获取下标 //获取值，数组差一个数 consoloe.log(shengList[eve.target.selectedIndex-1]); } -图8 ----封装ajax-原生分析 function frankAjax(paramsObj){ (1)线处理paramsObj参数，把这个json格式的参数转换成必要的格式 a.如果是get请求，将参数拼接到url后面 {...}->[...]->join()->url-+join() b.如果是post请求，则构建formData参数对象 formData.append(...,...); (2)准备xhr对象

注册渲染: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="/static/jquery-3.3.1.js"></script> <title>注册</title> <style> #myfile { display: none; } .error{ color:red; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>注册</h1> <hr> <form id="myform" novalidate> {% csrf_token %} {% for field in reg_form %} <div class="form-group"> {# field.auto_id取出当前input框自动生成的id#} <label for="{{ field.auto_id }}">{{ field.label }}</label> {{ field

导语 　　正好新人导师让我看看能否把产品目前使用的FileUploader从老的组件库分离出来的，自己也查阅了相关的各种资料，对文件上传的这些事有了更进一步的了解。把这些知识点总结一下，供自己日后回顾，也供有需要的同学参考，同时也欢迎各位大牛拍砖指点共同学习。 FileUpload 对象 　　在网页上传文件，最核心元素就是这个HTML DOM的FileUpload对象了。什么鬼？好像不太熟啊~别急，看到真人就熟了： <input type="file"> 　　 就是他啊！其实在 HTML 文档中该标签每出现一次，一个 FileUpload 对象就会被创建。该标签包含一个按钮，用来打开文件选择对话框，以及一段文字显示选中的文件名或提示没有文件被选中。 　　把这个标签放在标签内，设置form的action为服务器目标上传地址，并点击submit按钮或通过JS调用form的submit()方法就可以实现最简单的文件上传了。 <form id="uploadForm" method="POST" action="upload" enctype="multipart/form-data"> <input type="file" id="myFile" name="file"></input> <input type="submit" value="提交"></input> </form>