element上传组件自定义上传

FormData介绍

FormData使用方法

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

如果你想构建一个简单的GET请求，并且通过的形式带有查询参数，可以将它直接传递给URLSearchParams。

实现了 FormData 接口的对象可以直接在for…of结构中使用，而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

		
		<template>
		       <el-upload
                 class="upload-box"
                   :http-request="uploadFile"
                   ref="upload"
                   accept=".xlsx"
                   drag
                   :limit="1"
                   :show-file-list="false"
                   action=""
               >
                   <!--未开始-->
                   <div v-if="uploadStatus == 0">
                       <i class="el-icon-upload"></i>
                       <div class="el-upload__text">选择文件</div>
                   </div>
                   <!--进行中-->
                   <div v-if="uploadStatus == 1" class="file-css">
                       <i class="el-icon-loading"></i>
                       <div class="el-upload__text line-1 pl-10 pr-10">上传中</div>
                   </div>
                   <!--传完了-->
                   <div v-if="uploadStatus == 2 || uploadStatus == 3 " class="file-css">
                       <i class="success el-icon-document"></i>
                       <div class="el-upload__text line-1 pl-10 pr-10">{{ fileName }}</div>
                       <div v-if="uploadStatus != 3" @click.stop="clearFile" class="remove-file">
                           <i class="el-icon-delete"></i>
                       </div>
                   </div>
               </el-upload>
		</tempalte>

		--------------------

methods:{
	      uploadFile({file}) {//自定义上传
            let M = 10
            try {
                if (file.size > M * 1024 * 1000) {
                    this.$message.error(`文件应选择小于10M`)
                    return
                }
                this.uploadStatus = 1 //上传中 自定义状态
                this.file = file
                this.fileName = file.name
                let params = new FormData()
                params.append('excel', file) // 通过append向form对象添加数据
                uploadFile('你的url', params).then(res => {
                    if (res.code === 200) {
                        this.uploadStatus = 2 //上传中
                        this.import_path = res.data.excel_file_path //上传后得到的路径 
                    } else {
                        this.$message.error(res.message)
                    }
                })
            } catch (error) {
                console.error('没有file:', error)
            }

        },
}