用户在使用破军星工具箱上传天猫宝贝的时候失败了，上传日志提示“不带html标签长度不能少于5个字符？”这是什么意思呢？这个问题要如何处理呢？一起来看看该问题的解决办法吧。

这个问题是在上传的时候没设置对导致的，只需要天猫宝贝复制工具里设置一下就好了。

首先，需要下载破军星工具箱客户端，然后打开该软件，找到软件中的【天猫复制】工具，打开该工具，点击该工具中的【图片设置】菜单，在【图片设置】界面找到【详情去掉文字只要图片】、【移除详情页的链接】、【移除详情页的链接及内容】这三个选项，并将这三个选项勾选上；

然后，在找到下面的【隐藏链接】选项，将其选择为“不添加”；

最后，在重新上传宝贝就可以了。

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

• 文件上传原理
• 最原始的文件上传
• 使用 koa2 作为服务端写一个文件上传接口
• 单文件上传和上传进度
• 多文件上传和上传进度
• 拖拽上传
• 剪贴板上传
• 大文件上传之分片上传
• 大文件上传之断点续传
• node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

• 请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

• 消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的 名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

• ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
• 获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件对象
    var path = file.path;
    var fname = file.name;//原文件名称
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/

anvas绘图尺寸莫名其妙的缩放，让我困惑很久的问题

我一定要弄明白为什么？

本文会告诉你，canvas有两个尺寸，绘图尺寸和显示尺寸

背景

请先仔细看看这个图片，彩色部分和黑色部分，图片缩放了

上面图片整体大小： 192×108

我本来希望通过drawImage我将一个图片1920×1080，缩小到：192×108

代码如下：

this.width=192；this.height=108； 
canvas.drawImage(img,0,0,this.width,this.height);

而且我的canvas 样式：

<canvas style="width: 192px; height: 108px;“ ></canvas>

我希望绘图一个： 192，108 尺寸的 canvas

然后我就： this.ctx.drawImage(img,0,0,192,108);

哈哈，结果就是上面这个图片的样子了

实际上就是你上面看到到的效果，这个并不是我要的，图片显然缺少一大块

我期望的样子：

为什么呢？ 两个尺寸问题

原因：元素大小与绘图区域大小不一致的问题

可以通过一下代码你可以看出来

//绘画区域

console.log(canvas.width + "---" +canvas.height)

// 300---150

//元素区域

var box = canvas.getBoundingClientRect(); //canvas元素的边界框

console.log(box.width + "---" + box.height); /

//192---108

这个俩个值不一致，导致了图片的自动缩放，这个自动也导致了我的困惑；

我查询了canvas相关资料：300---150 这个是默认值，我的老天

进一步理解这些内容？

1、canvas元素指html中用css设置的尺寸，用于界面显示

2、绘图区域尺寸需要在js中设置，用于画图；

3、如果这个两个值一致，那么图片不会自动缩放了，你画多少显示就是多少大了；

解决的思路和方法

1、不要用css去设置他们的样式，采用js直接设置canvas的大小；（方案1：实际上基本采用这个方式）

2、绘图时候目标绘图大小进行转换，抵消自动缩放带来的后果 （方案2）

方案1：讨论

将原来的： <canvas style="width: 192px; height: 108px;“ ></canvas>

修改成： <canvas width=”192px“ height=”108px“ ></canvas>

通过以上可以看出，这两个设置是不一样的；

方案二：讨论

自动缩放规律

结果尺寸 = 绘画尺寸（canvas元素/ 绘图表面）

如果要保证自动缩放后还是你期望的结果，那么就采用下面绘图公式（方案二）

那么： 实际绘画尺寸 = 绘画尺寸（绘图表面 / canvas元素）

我实际项目做法：

this.$el 是一个canvas对象

//显示尺寸

 this.$el.style.width = width + 'px';
 this.$el.style.height = this.height + 'px';
 //绘图尺寸=画布尺 这两个值一定是要一样的
 this.$el.width = width;//注意没有尺寸单位
 this.$el.height = this.height;//注意没有尺寸单位

总结：

canvas 有两个尺寸： 显示区域尺寸和绘图尺寸，请确保他们一样；