不得不说vue和elmentui组件配合真是好用到爆，这段时间在优化代码，整理一下项目当中遇到的难点，有一个页面是是要上传文件到后台，文件类型有图片、word、pdf文件。
上传单张图片只需要参考elementui官方文档即可，也可以看下边的例子：
<el-upload :action="this.$basePath+ '/notes/sysFile/upload'"
:headers="{token: sessionId}" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError">
<img class="photo" :src="imgPath"/>
</el-upload>
在上传成功的函数里这样写：
uploadSuccess:function (response, file, fileList) {
console.log(response)
this.imgPath =this.$basePath + response.info.fileName //这是核心代码，将上传的路径复制给放图片的容器即可
},
如果是上传多个文件，那就仔细看我下边的代码，真的是踩了好多次坑才对el-upload组件里有一个file-list属性，专门是针对上传多个文件所使用的，存放的是上传的文件的列表，废话不多说，直接上代码：
<el-upload :action="this.$basePath+ '/notes/sysFile/upload'"
accept=".jpg,.jpeg,.mp3,.mp4,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF" ref="upload"
:headers="{token: sessionId}" :on-success="addUploadSuccess" :on-error="uploadError"
:file-list="fileList">
<el-button size="small" type="primary" slot="trigger">选择文件
</el-upload>
我们可以将上传的文件保存在一个list列表里边，直到文件选择完毕，再将这个list集合传给后台就可以了，上传文件成功的函数里是这样写的：
addUploadSuccess:function (response, file, fileList) {
console.log(response)
this.fileInfo.filesList =makeUrls(fileList)
},
因为项目里不只是一处地方用到了上传文件，所以可以把上传函数写到一个方法里，方便其他地方调用
function makeUrls(fileList) {
let urls = []
fileList.forEach( item => {
// urls.push(item.response.info.fileName)
urls.push(item.response ? item.response.info.fileName : item.fileName)
})
return urls
}
传给后台的参数直接在data里边用这样的写法files:this.fileInfo.filesList就行了，
以上就是一种上传文件的写法，仅供参考，希望能对需要的朋友有所帮助。
