vue中-图片上传预览和FormData上传

news/2024/7/10 2:33:51 标签: vue, 前端

vue中-图片上传预览和FormData上传

  • 图片上传预览
  • FormData上传

图片上传预览

原理: 通过监听input表单的 change事件, 获取标签的文件
在这里插入图片描述


FormData上传

  1. 要实现文件上传, 必须借助FormData对象;
  2. 表单域中, 需要提交的数据, 必须设置name属性, 且取值和接口的参数名一致;
  3. FormData实例化的时候, 需传入form表单的dom对象;
  4. 如果有非表单项的数据数据需要传入, 可以借助 .append("key", value) 追加参数, 该方法没有返回值, 不能采用链式编程;

在这里插入图片描述


http://www.niftyadmin.cn/n/1263675.html

相关文章

ES6提供的数组操作

一、复制数组 数组是复合的数据类型,直接使用 “” 复制的话,只是复制的数组的指针,当改变复制数组的值时,原数组也会发生变化。要想克隆一个全新的数组,可以使用以下方法 var a [1,2]; var b [...a]; 二、找出第一…

在箭头函数中, 返回字面量形式的对象

需要用小括号把对象字面量包起来;大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上小括号。 const arrO [{ a: 12, b: 卡卡西, name: 鸣人 }] const newArr arrO.map(({ a, b }) > ({ a, b })) console.dir(newArr)

解构对象 - 无声明赋值

详情点击此处—>mdn详讲: 无声明赋值 一个变量可以独立于其声明进行解构赋值。 var a, b; ({a, b} {a: 1, b: 2}); 注意:赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。 {a, b} {a: 1, b: 2} 不是有效的独立语法,因为…

前端-环境变量配置(vue)

说明 一个实际开发项目最少有两种环境: 开发环境: 程序员正在开发项目;生产环境: 程序员的代码已经写完了,项目已经上线了; 当然除此以外, 根据实际情况还有预发布环境、测试环境等…但是以上2个环境是最低要求 配置环境变量 注意: 修改任一环境变量…

vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式

vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式1. vuex1.1. 作用1.2. 成员及作用2. 模块(module)说明3. 要点及注意点3.1. namespaced: true3.2. 辅助函数写在哪里?4. 演示代码概览5. state5.1. 全局变量获取和辅助函数获取…

npm-查看包所有版本和下载指定版本包

以jquery为例: 查看包所有版本 npm view jquery versions下载指定版本包 npm install jquery1.12.4

关于!!+Cookies.get(‘sidebarStatus‘)讲解

文章目录问题引入作用及文件位置作用文件位置!!Cookies.get(sidebarStatus)详细详解总结问题引入 在vue-element-admin框架中, vuex的app子模块中有这段代码: opened: Cookies.get(sidebarStatus) ? !!Cookies.get(sidebarStatus) : true,其中的 !!Cookies.get(sidebarStatu…

父子传值, 报错

单向数据流, 子组件不允许修改父组件的数据, 否则报错