需求上传文件,代码如下:
<el-form-item label="文档上传" prop="filename">
<el-input v-model="form.filename" placeholder="" readonly />
<el-upload
ref="upload"
action="#"
:on-change="changeFile"
:auto-upload="false"
class="upload-demo"
:show-file-list="false"
>
<el-button style="margin: 0px;">上传</el-button>
</el-upload>
<el-button style="margin: 0px;" @click="deleteRow">删除</el-button>
</el-form-item>
处理逻辑:
async changeFile(file) {
const isOffice = /(\.doc|\.docx|\.xls|\.xlsx|\.ppt|\.pptx|\.pdf)$/.test(file.name.toLowerCase())
if (!isOffice) {
this.$message.error('只能上传 office 文档或 PDF 文件')
return
}
//接口是将文件上传到服务器的
const { data } = await new FileUploadService(httpClient).uploadUsingPost1({ vcategory: 'workflow' }, { uploadfile: file.raw })
if (data.result === '1') {
this.form.filename = data.path[0][0].split('|')[0]
this.form.fileid = data.path[0][2]
}
},
async deleteRow() {
if (this.form.fileid) {
//接口是删除服务器文件的
const { data } = await new FileUploadService(httpClient).delFileUsingGet({ fileId: this.form.fileid })
if (data.result === '1') {
this.form.filename = ''
this.form.fileid = ''
}
}
}