奔三的日子里4

Posted 2021-01-18 hsmworld

ES 7     async／await

 

<!--------------------------------------------------------------->

 

前端文件上传原理

前端网页文件上传一般使用 <input type="file" />来实现。

在 html 文档中 <input type="file" />标签每出现一次，一个 FileUpload 对象就会被创建。
该标签包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。
多选：标签可以通过添加 multiple 属性来支持多选；如果选择了多个文件, 这个值表示第一个被选择的文件路径. javascript 可以通过 Input 的 FileList 属性获取到其他的文件路径.
文件信息：可以通过 input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表，列表包含图片的name，type，size等属性。
限制文件类型：你可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。如: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG
选择文件会触发input的onchange事件;
上传：上传文件前 使用FileReader对象读取指定file的文件，并将文件转换为二进制字符串, 并将xhr对象, overrideMimeType 属性设置为text/plain; charset=x-user-defined-binary, 最终后台接收到二进制后再做具体处理。

例子：??

var reader = new FileRender();
xhr.open(“POST”, url);
xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’);
reader.onload = function(evt) {
xhr.send(evt.target.result);
};
reader.readAsBinaryString(file);

---------------------
作者：qq_8572777886
来源：CSDN
原文：https://blog.csdn.net/q857277886/article/details/79092591
版权声明：本文为博主原创文章，转载请附上博文链接！

---------------------
作者：qq_8572777886
来源：CSDN
原文：https://blog.csdn.net/q857277886/article/details/79092591
版权声明：本文为博主原创文章，转载请附上博文链接！

<!--------------------------------------------------------------->

小知识：

el-table，是把 width 换成 min-width ,就支持百分比显示啦 ！

vue使用v-for循环组件的时候需要，写：key值，否则会报警告