el-upload如何灵活使用http-request自定义上传方法（2.0版）？
前言
在我使用1.0版本的过程中，还是过于繁琐了些。后来总结，主要是总放不下原el-upload组件自带的上传功能，原组件在没有选择文件时，使用event的submit()（如this.$refs.upload.submit()）事件进行上传会根本没反应。既然如此，我们何必再使用他自带的上传功能（实际上，上传逻辑写在组件上也很丑），只需要把他当做获取到文件的一个工具即可。
点击查看1.0版本
思路
- el-upload组件自带上传的所有属性都不要，让它在选取和删除时，同步到要上传的数据中；
- 因为在el-upload组件上，我们已经同步好文件数据到我们要上传的uploadForm数据中，接下来只需要调用我们的上传逻辑直接上传就好。（相当于组件就给我们做好了要上传的数据，同时又避免了考虑用它自身上传逻辑带来的麻烦）。
运用示例
Html
最主要是利用选取(on-change)和删除(on-remove)两个属性。
- 在更改时，上传对象uploadForm始终跟选择的文件同步(因为选择新文件就会触发on-change)，就能保证选取的新文件始终在我的上传数据中。file.raw为on-change回调函数的二进制文件数据；
- 在删除时，将file设置为空
''
有一种特殊情况，就是没有变更文件时，只改了其他数据提交时可能会报错。我的解决办法是，可以在打开el-upload组件时，将uploadForm.file属性删除delete uploadForm.file，后端没有接收到该字段时，不再校验从而避免报错。
- 上传图片版
<el-upload
action=""
list-type="picture-card"
:file-list="fileList"
:on-change="(file, fileList) => uploadForm.file = file.raw"
:on-remove="(file, fileList) => uploadForm.file = ''"
:auto-upload="false"
:limit="1"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-button type="primary" @click="clickUpload('userForm', uploadForm)">点我上传</el-button>
<!-- 不使用它自带上传，可以省掉很多属性，目的是拿到文件即可 -->
<!-- :file-list="fileList"用来控制图片的显示，自己加一张图片的方法是fileList.push({url: 图片地址})，就会显示一张图片 -->
- 上传文件版
<el-upload
action=""
:file-list="uploadForm.fileList"
:on-change="(file, fileList) => uploadForm.fileList = fileList.map(file => file.raw)"
:on-remove="(file, fileList) => uploadForm.fileList = fileList.map(file => file.raw)"
:auto-upload="false"
multiple
drag
ref="uploadForm"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip">单个文件最好不要超过10M</div>
</el-upload>
<el-button type="primary" @click="clickUpload('userForm', uploadForm)">点我上传</el-button>
JavaScript
data() {
return {
uploadForm: {
file: null,
},
}
},
methods: {
clickUpload(isAdd=true) {
// 注意上传文件时，使用multipart/form-data的contentType内容格式
this.$refs.uploadFormRef.validate(valid => { // 校验数据，如果没有，可以不要
if (!valid) return false
// 直接交由自定义上传逻辑处理，这次不再使用它自带的上传功能
if (isAdd){
// 你的添加逻辑，只要将uploadForm的数据提交到你的后端处理即可
}else{
// 你的编辑时的逻辑，只要将uploadForm的数据提交到你的后端处理即可
}
}
}
}
不明白的地方欢迎留言，我们一起探讨
