1.关于http请求Content-Type的一些理解
*application/json:
axios默认的content-type是‘application/json；charset=UTF-8’
默认情况下，axios将JavaScript对象序列化为JSON
浏览器原生的form表单提交，是以‘application/x-www-form-urlencoded’方式传递数据
请求参数是以字符串的格式（类似get请求的QueryString格式）放在Form Data中
如果参数是对象，需要使用qs转换，或者使用new FormData
JSON.stringfy() 和 qs.stringfy()
let data = { name: 'edward', age: '25' }
前者：JSON.stringfy(data) // ”{ 'name' : 'edward' , 'age' : '25' }”
后者：qs.stringfy(data) // 'name=edward&age=25'
XMLHttpRequest Level 2添加了一个新的接口FormData。
利用FormData对象，我们可以通过js用一些键值对来模拟一系列表单控件，
使用XMLHttpRequest的send方法来异步的提交这个"表单"，或者使用第三方库，比如fetch、axios
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456);
axios({
method: 'POST',
url:'/users'
data: formData
})
使用Input上传文件，或者直接将文件流通过xhr提交后台接口
一般不用额外设置请求头的Content-Type，浏览器会自动识别流文件
参数请求格式：Content-Type: multipart/form-data;boundary=${boundary}
${boundary}是浏览器随机生成的字符串，用来分割参数，作用等同于 &
注意点：
- 传统的HTTP请求时候，
Content-Type默认为"文本"类型（text/plain） - 传统的form提交的时候，
Content-Type默认为"Form"类型（application/x-www-form-urlencoded) - axios传递字符串的时候，
Content-Type默认为"Form"类型（application/x-www-form-urlencoded) - axios传递FormData格式数据时，
Content-Type默认为"Form"类型（multipart/form-data; boundary=${boundary} ) - axios传递对象的时候，
Content-Type默认为"JSON"类型（application/json)
扩展，使用xhr传递流文件到后台服务
var dataUrl = '流地址'
var fileName = new Date().getTime() + '_' + Math.random() + '.jpg';// 以时间戳作为文件名
var file = new File([dataUrl], fileName, { type: 'image/jpg' });
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // 接口响应完成
if (xhr.status === 200) {
// 成功
}
} else {
// 失败
}
}
}
xhr.open('POST', '/api/pictures/upload', true);
// 注意请求头的Content-Type不用设置
xhr.send(formData);
原文地址: www.cnblogs.com/caofeng11/p…
2.input框type为file可以通过accept限制文件类型
3.拖拽容器边框进行缩放思路
1.定位8个盒子在容器的四个点个四条边,通过计算鼠标移动距离,动态修改容器的left,top和width,height
4.拖拽出现参考线自动吸附功能思路
1.将画布中的组件的位置信息保存一份map,实时更新
2.拖拽组件时确定参考线出现的时机和位置
3.拖拽组件时确定参考线删除的时机
4.鼠标抬起时,确定拖拽组件保存的位置
