VUE饿了么UPload组件自定义上传

代码：

1.视图：

 <el-dialog :title="dialogTitle" width="30%" :visible.sync="dialogFormVisible" :destroy-on-close="true">
            <el-form ref="fileForm" class="items-align" >
                <el-form-item>
                    <el-upload
                        :limit="1"
                        class="upload-demo"
                        accept=".xlsx, .csv, .xls"
                        action = ''
                        :auto-upload="false"
                        :on-change = "onFileChange"
                        :on-exceed = "fileExceed"
                        :on-remove="handleRemove"
                        drag
                        >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item><el-link type="primary" download="resourceManagementDemo.xlsx" href="excel/resourceManagementDemo.xlsx">点击下载模版</el-link></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="fileUpload">确认</el-button>
            </div>
        </el-dialog>

最外层的el-dialog, :destroy-on-close="true"，能够在关闭弹窗后销毁文件上传组件，清空文件列表。

2.JS：

onFileChange(file){
   // debugger
   this.fileList.push(file.raw)
},
fileExceed(){
  this.$alert("文件上传数量只能为1")
},
handleRemove(){
  this.fileList.pop()
},

3.文件上传POST

 fileUpload() {
            const url = '******'
            const form = new FormData();
            if(this.fileList.length==0){
                this.$alert("文件数量不能为0")
                return
            }
            form.append("file", this.fileList[0])
            const params = {
                *****
            }
            this.$axios.post(url, form, {
                params
            }).then(res=>{
                if(res.status==200&&res.data.result=="SUCCESS"){
                    setTimeout(()=>{
                        this.$alert("您的文件已导入","提示",{callback: (action) => {
                        this.fileList = []
                        this.render()
                        },})
                    },500)
                    this.dialogFormVisible = false
                }else{
                    this.$alert("导入失败，请重试")
                }
            },error=>{this.$alert("导入失败，请重试")})
        },

• 不能传入prop, :file-list=“fileList”，传入之后on-change会捕捉on-remove事件，把删除的文件添加回fileList。
• 必须处理on-remove事件， 否则文件没有被移出数组
• 不能使用on-success钩子, 自定义上传该函数不生效
• 设置不允许自动上传，:auto-upload="false"
• action为组件自动上传的地址，必填属性，设置为空