api接口处添加属性 (标红处) // 校验台账 export const checkEquiment = (data) => { return axios({ url: '/job/equipmentInfo/checkEquipment', method: 'post', data, ContentType:'multipart/form-data' }) } 封装axios中调用接口中配置的属性 // 二次封装axios模块,包含拦截器等信息 import Axios from 'axio

使用  iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before-upload ="handleUpload"等于false  (1).:before-upload 是 iview Upload 上传组件的一个属性 设置返回值为 false 可以阻止默认上传方式(自动上传模式) (2).handleUpload 是方法  *备注:代码在最后面 3.上传

iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写

<template> <div> <button @click="clearUploadedImage">重新上传</button> <Upload ref="upload"><Upload> </div> </template> <script> export default { methods: { clearUploadedImage () { 该方法可

开始的时候 找不到this了,后来想起来要用 ES6的箭头函数 就有this了 reader.onload = e => { // 读取到的图片base64 数据编码 将此编码字符串传给后台即可 // console.info('e', e) // console.info('e.target.result', e.target.result) // console.info('modalVmodel', format) this.base64 = e.target.result // cons

文件流转换 一般用于axios设置接收文件流设置时responseType: 'blob'当接口报错时,前端因已设置responseType: 'blob'无法再接收json格式数据,会把json格式数据转为blob格式,而到了这里拦截器已无法识别blob进而无法对blob数据进行拦截,这个时候就需要前端将数据blob格式进行转换成正常的json的数据,这会导致前端无法显示报错信息   /**  * 文件流转换 主要代码块,可自定义下载文件名称  * @param {} data  */ exp

responseType值的类型可为如下 axios请求下载导出一个文件,请求成功时返回的是一个流形式的文件,需要设置responseType: 'arraybuffer',但是请求失败的需要返回的是json数据, 所以需要把arraybuffer转成Json对象. 例: 请求设置了responseType: 'arraybuffer',请求成功时,下载文件,请求失败时,后端返回json对象,如:{"msg":"系统异常","code":1,&q

本文为转载文章,因见猎心喜,担心失传,故贴此以备不时之需. 原文地址:传送 你真的会使用XMLHttpRequest吗? xmlhttprequest http cors ajax ruoyiqing 1月17日发布 推荐 23 推荐 收藏 159 收藏,6.6k 浏览 看到标题时,有些同学可能会想:"我已经用xhr成功地发过很多个Ajax请求了,对它的基本操作已经算挺熟练了." 我之前的想法和你们一样,直到最近我使用xhr时踩了不少坑儿,我才突然发现其实自己并不够了解xhr,我知道的

看到标题时,有些同学可能会想:“我已经用xhr成功地发过很多个Ajax请求了,对它的基本操作已经算挺熟练了.” 我之前的想法和你们一样,直到最近我使用xhr时踩了不少坑儿,我才突然发现其实自己并不够了解xhr,我知道的只是最最基本的使用.于是我决定好好地研究一番xhr的真面目,可拜读了不少博客后都不甚满意,于是我决定认真阅读一遍W3C的XMLHttpRequest标准.看完标准后我如同醍醐灌顶一般,感觉到了从未有过的清澈.这篇文章就是参考W3C的XMLHttpRequest标准和结合一些实践验证

XMLHttpRequest 使用 XMLHttpRequest 对象可以和服务器进行交互,可以获取到数据,而无需让整个页面进行刷新.这样 web 页面可以做到只更新局部页面,降低了对用户操作的影响. XMLHttpRequest 对象可以用于获取各种类型的数据,而不止是 xml,还支持 JSON,HTML 或者纯文本 本地服务器 let http = require("http"); let url = require("url"); const port = 3

demo地址:https://pan.baidu.com/s/1qYNYCFE 因为项目需要在上传文件的时候,知道上传的进度,所以封装了一个方法,在上传文件的时候动态显示上传进度,主要根据XMLHttpRequest 的onprogress方法,其中upload.onprogress是上传的时候的回掉,.onprogress是下载的时候的回掉,onprogress回掉对象里面有两个参数:loaded.total,loaded表示当前上传或下载的字节数,total表示预估的总的字节数,我们可以根据

<!DOCTYPE html> <html> <body> <script> function reqListener () { console.log(this); console.log(this.getAllResponseHeaders()); console.log(this.responseText); } var params = "lorem=ipsum&name=binny"; var oReq = new XM

文件下载 传统的文件下载有两种方法: 使用<a/>标签,href属性直接连接到服务器的文件路径 window.location.href="url" 这两种方法效果一样.但有个很大的问题,如果下载出现异常(连接路径失效.文件不存在.网络问题等),会导致原本的页面被覆盖掉,显示404等错误信息. 大致的优化思路如下: 使用<a/>标签HTML5新的属性download. 使用<iframe><iframe/>元素进行下载. 使用ajax.a

最近业余帮朋友做两个vue项目,一个是面向用户纯展示系列的(后统称A项目),一个是后端管理系统类的(后统称B项目).两者在技术上都没难度,这里对开发过程遇到的问题.取舍等做一个小节. 关于项目搭建 目前vue-cli脚手架已经很成熟,创建项目很方便,按照官网文档或网上相应教程即可快速搭建(https://cli.vuejs.org/zh/guide/deployment.html) 优点:快速.方便.零配置.可扩展性强.灵活性强 缺点:对于小项目来讲,搭建不够精简,会默认安装多余的包(比如会默认

前言 书接上回,我们实现了批量修改文件的时间,但是却没有实现文件名称的批量修改,是因为我也说过,没有界面的话直接在命令行实现显得有点繁琐,所以我们就通过接口+界面的方式来实现我们这个小需求吧.所以,闲话不多说啦,开始写我们的代码啦~~ 本次教程过于啰嗦,所以这里先放上预览地址供大家预览--点我预览,也可到文末直接下载代码先自行体验... 简单的说下实现的效果 通常我们在蓝湖上下载的切图是和UI小姐姐定义的图层名相关的,一般下载下来之后我们就需要修改名称,但是一个个修改又显得十分傻逼 ,所以我们就

LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/dunitian/p/5551701.html 这次说下简洁版而又不失功能的WangEditor 先看看效果 基本上常用功能都有了,下面说下完整的demo: 前端案例: <!DOCTYPE html> <html> <head> <meta http-equiv=&qu

最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是地址,由于里面有些demo和代码实例,我就不再赘述了.直接到官网下载到zip包,解压会有下面的东西 我们将这些东西全部引入我们的项目中,在自己的html页面引入,大致如下 初始化SimDitor只用在html页写一个textarea标签和javascript写入初始化就行了 var editor =

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁剪功能的实现,大家可以看一下,写的真不错.我就是在参考了他的代码下,结合uploadify使用一般处理程序实现了这个功能,写下了这篇在asp.net实现图片在线上传并在线裁剪,有点绕口哈,废话不多说,现奉上代码,供同学们交流参考,有什么不对的地方,望请大家多多提提建议,多谢!多谢! 2.组成 首先说

一.项目模块规划 1.项目分为PC端.移动端.和PC管理端,分为对应目录为 /Application/Home,/Application/Mobile,/Application/Admin: 对应入口文件为 index.php, mobile.php,admin.php,入口文件中设定绑定模块: ThinkPHP配置>>>>>>>>>>>>>>>>>>>>>>>>

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta charset="utf-8"> <meta name="viewport&