运用upload有两种场景:
①上传文件是个单独的接口,action里就放上传文件的接口地址就可以,然后在成功回调里拿到后端返回的内容(可能是url;也可能是个对象,里边有url和name)。
②上传文件没有接口,文件作为某个接口的其中一个参数,和其他参数一起,最后传递给后端,就是今天要说的场景。
先说我的需求:
点击上传的蓝色按钮之后,并没有调接口,而是在所有的(其他的)表单填写完成之后 点击下边的 创建 按钮 把其他输入框的数据以及刚刚上传的文件 一起提交给后端,这个时候才会调接口。
下面这张图就是我的需求图:
解决:
templete部分:
:headers="{ 'Content-Type': 'multipart/form-data'}" //设置请求头,可以有token什么的
action="none" // action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性, 组件就会自动按 action 的地址提交。不设置这个属性就写 action="none"
:show-file-list="false"
class="file_uploader"
drag //是否启用拖拽上传
:on-change="handleChange" //文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
:auto-upload="false" //是否自动(立即)上传,这行代码很关键<el-form-item label="算法文件" :label-width="formLabelWidth">
<el-input
v-model="form.modelFileName"
placeholder="算法文件"
style="width: 80%"
disabled
></el-input>
<el-upload
:headers="{ 'Content-Type': 'multipart/form-data'}"
action="none"
:show-file-list="false"
class="file_uploader"
drag
:on-change="handleChange"
:auto-upload="false" // 重要
ref="upload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
js 部分代码:
核心代码
this.mutipartFile = new FormData();
this.mutipartFile.append("modelFile", file.raw);表单里的其他参数,都以这种形式添加进 this.mutipartFile,this.mutipartFile就是个变量,叫什么都可以,看你自己
// 上传文件-----重要,为了拿到 file.raw
handleChange(file) {
this.form.modelFileName = file.name
// 这两行代码比较重要---核心代码
this.mutipartFile = new FormData();
// modelFile 我们后端需要的参数名字,看你们需求
this.mutipartFile.append("modelFile", file.raw);
},
// 点击确定(创建)
submitForm() {
this._submitForm()
},
// 节流函数
_submitForm: throttle(function () {
// 表单中其他输入框的值,需要传递的参数,this.mutipartFile.append('参数名', '值')
this.mutipartFile.set('remarks', this.form.remarks);
this.mutipartFile.set('name', this.form.name);
this.mutipartFile.set('vars', JSON.stringify(this.form.vars)); //这个参数是因为我们后端规定数组要json形式
// 调接口,发网络请求,传递参数
this.model_add(this.mutipartFile)
}, 600),
// 添加模型
model_add(params) {
// 调接口,传递是否启用的布尔
model_model_add(params).then((res) => {
console.log(res, '创建')
})
},
网络请求那一块也可以直接这样写
axios({
method:'POST',
headers:'{
'authorization': token,
'Content-Type': 'multipart/form-data'
}', //放你们需要加的请求头
url:请求接口,
data:this.mutipartFile
}).then(res=>{
console.log('提交成功')
}),