<input type="file">------在vue中我们可以给input控件一个ref属性，然后我们可以使用this.$refs.(前面这家伙的属性值,其实就是一个锚点)去得到这个控件，然后去调用这个控件的files属性，我们就可以拿到控件里面获取到的数据了。当然，他是一个对象，这个数据也是存储在对象的一个属性当中，具体啥的自己去打印看看。然后这个对象有个name属性，顾名思义，就是你得到的文件名，还有一个属性是length，我们可以利用这个属性去判断控件到底里面有没有数据。如果你自己去做过，你会发现有下面一种场景。
------场景场景场景--------
1.第一次用控件获取一张图片，我们看到控件获取到了数据
2.第二次点开同样的控件，但是.....
3.我啥也不选
4.控件里面原来的数据被清空了，貌似从来没来过这个世上
这显然不太友好，于是动动脑子，你可以这么做
data () {
return { fileName: null } }-----------------------------------------------------------------------------
if (this.$refs.imgFile.files.length !== 0) { this.fileImg = this.$refs.imgFile.files } else { this.$refs.imgFile.files = this.fileImg return } 上面是vue的写法，因为最近用vue写项目，所以偷个懒。用原生的话做的方式一模一样
好了，现在你会发现，不会再有上面那种非友好的用户体验了，当然这个因人而异，有人说这是个fetch，我觉得它很多时候是个bug.....
我们接着唠
接下来，我们会生成一个图片对象，你可以用createElement的方式或者用new Image的方式，这个不纠结
请看这里
let imgRender = new FileReader()//用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据imgRender.readAsDataURL(file)//将文件读取为DataURL
具体文献链接:http://blog.csdn.net/zk437092645/article/details/8745647
如果你问什么是dataurl，我建议你自己先去找文章看看吧，我这有一篇不错的文章链接你可以看看:http://www.webhek.com/post/data-url.html
然后，我们利用canvas，先设置大小，于是可以这么做
let canvas = document.createElement('canvas')canvas.width = targetWidthcanvas.height = targetHeight 我记得canvas对象默认的宽度是300，高度是150，你自己可以打印看看
然后我们做下面一件事
let canvasCtx = canvas.getContext('2d') 为了省去某些同学去翻资料，我解释下啥意思===>指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API(这是网上的解释，我只是个搬运工)。
然后我们用这个对象的fillRect方法，可以设定这个环境对象的横坐标、纵坐标、宽度、高度。然后是最后一步，用drawImage方法向画布上绘制图像、画布或视频。就像下面
canvasCtx.fillStyle = '#fff'canvasCtx.fillRect(0, 0, canvas.width, canvas.height)// set the default background color of png to whitecanvasCtx.drawImage(图片对象files[0], 0, 0, targetWidth, targetHeight)
OK，这面的步骤很简单有木有。总的来说，我们还是用canvasCtx环境对象做一些'动作'
接下来的动作就很简单了，咱们看下面
let picBase64 = canvas.toDataURL('image/jpeg', 1)//canvas里面是二进制二进制2222222222222let fd = new FormData()let blob = ImgUtil.base64ToBlob(picBase64)//不是blob，你传不了，这里不多解释这个，网上解释很多----你可以用atob()这个方法来，但是这个方法有挺大的缺陷，不过兼容性很好了,而且 你要对它进行切割切割，因为前面会有些emmit----》九九归一，来个new Blob()统统搞定fd.append('pic', blob) OK，到这里，你可以拿上你的接口，把这东西甩过去了。当然，并不是所有情况都是这样子，你得和你的后端小伙伴协定好，到底要什么样的数据。