BiKaBi又回来了,今天抽空整理一下上传附件的一些坑,希望小伙伴不要能够避开
新增时,上传附件(单个)
上传附件HTML
这里就提一点name是后台需要接收的字段,跟重要,还有一些属性的用法可以去看官方的文档,那属性就不多介绍,element ui 文档
<el-form-item label="营业执照附件:" prop="filePathList1" style="width:100%;">
<el-upload
class="upload-demo"
v-model="filePathList"
:headers="headerMsg"
name="files"
:action="actiontion"
:on-success="success"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="9"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传9个文件,且不超过500kb</div>
</el-upload>
</el-form-item>
上传附件JS
// 上传带token
headerMsg:{Authorization: this.$token},
//这个是你需要带的token,
actiontion: this.$baseURL+'/common/upload',
//这个是你要带的一个地址, 你可以先把后台服务的地址直接写死的,后面再去 axios里面去公共出来
//上传成功后
success(response, file, fileList){
response.data[0].annexType = 1
this.filePathList1.push( response.data[0])
// console.log(this.filePathList);
},
// 真正的去删除你已上传的,这里根据你定义的字段去删除(需要去调试一下)
handleRemove(file) {
console.log(file);
const { tmp_path } = file.response; //* 2. 从 pics 数组中,找到这个图片对应的索引值
const i = this.dispatchingsubmit.filePathList.findIndex(
(item) => item.pic == tmp_path
); //* 3. 调用数组的splice方法,把图片信息对象,从pics数组中移除
this.dispatchingsubmit.filePathList.splice(i, 1);
},
handlePreview(file) {
// console.log(file.name);
},
//一次最多上传9个文件,根据你的需求去修改
handleExceed(files) {
this.$message.warning(
`当前限制选择 9 个文件,本次选择了 ${
files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件`
);
},
// 删除已上传的提示框
beforeRemove(file) {
return this.$confirm(`确定移除 ${file.name}?`);
},
修改时,上传附件(单个)
修改的时候不同的点就是你上传的文件需要做显示的作用,需要定义:file-list="fileList1"来接受去赋值
<el-form-item label="营业执照附件:" prop="filePathList1" style="width:100%;">
<el-upload
class="upload-demo"
v-model="filePathList1"
:headers="headerMsg"
name="files"
:action="actiontion"
:on-success="success1"
:file-list="fileList1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="9"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传9个文件,且不超过500kb</div>
</el-upload>
</el-form-item>
上传附件HTML(多个)
<el-form-item label="营业执照附件:" prop="filePathList1" style="width:100%;">
<el-upload
class="upload-demo"
v-model="filePathList1"
:headers="headerMsg"
name="files"
:action="actiontion"
:on-success="success1"
:file-list="fileList1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="9"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传9个文件,且不超过500kb</div>
</el-upload>
<el-form-item label="体系认证证书:" prop="filePathList2" style="width:100%;">
<el-upload
class="upload-demo"
v-model="filePathList2"
:headers="headerMsg"
name="files"
:action="actiontion"
:on-success="success2"
:file-list="fileList2"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="9"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传9个文件,且不超过500kb</div>
</el-upload>
上传附件JS(多个)
上传多个也只是把返回过来的值最后提交
success1(response, file, fileList){
response.data[0].annexType = 1
this.filePathList1.push( response.data[0])
// console.log(this.filePathList1);
},
success2(response, file, fileList){
console.log(response);
response.data[0].annexType = 2
this.filePathList2.push(response.data[0])
},