### 組件使用： ***** ``` <uploadFile?:visible.sync="visibleFile"?:on-success="fileSuccess"?/> ``` ### 文件上傳至服務器處理 ***** `Api.xxx()`的請求頭同樣考慮添加 `responseType:'blob',//?流??形式` ``` //?導入上傳 fileSuccess(data)?{ ??????const?param?=?new?FormData()?//?FormData?對象 ??????param.append('file',?data.raw)?//?文件對象 ??????//???param.append('uploadTitle',?name)?//?其他參數 ??????Api.xxx(param).then(res?=>?{ ????????this.visibleFile?=?false ????????console.log(res,?res.type) ??????}) } ``` ### uploadFile組件 ***** ``` <template> ??<ComDialog ????width="450px" ????:title="fileTitle" ????:visible="visible" ????@before-close="handleClose" ??> ????<template> ??????<slot?/> ??????<el-form ????????ref="fileForm" ????????:model="fileForm" ????????:rules="rules" ????????label-width="80px" ????????class="form-ruleForm" ??????> ????????<el-form-item?label="選擇文件"?prop="name"> ??????????<el-input?v-model="fileForm.name"?placeholder="請選擇"?readonly?/> ??????????<el-upload ????????????ref="upload" ????????????class="upload-demo" ????????????:action="'#'" ????????????:show-file-list="false" ????????????:on-preview="handlePreview" ????????????:on-remove="handleRemove" ????????????:on-success="handleAvatarSuccess" ????????????:on-change="handleChange" ????????????:before-upload="beforeAvatarUpload" ????????????:auto-upload="false" ??????????> ????????????<el-button?slot="trigger"?type="primary">選取文件</el-button> ??????????</el-upload> ????????</el-form-item> ??????</el-form> ????</template> ????<template?slot="footer"> ??????<el-button?type="primary"?@click="submitForm">確?定</el-button> ????</template> ??</ComDialog> </template> <script> import?ComDialog?from?'@/components/ComDialog' export?default?{ ??name:?'UploadFile', ??components:?{?ComDialog?}, ??props:?{ ????fileTitle:?{ ??????type:?String, ??????default:?'文件上傳' ????}, ????visible:?{ ??????type:?Boolean, ??????default:?false ????}, ????onSuccess:?{ ??????type:?Function, ??????default:?null ????} ??}, ??data()?{ ????return?{ ??????rules:?{}, ??????fileForm:?{ ????????name:?'' ??????} ????} ??}, ??methods:?{ ????handleChange(data)?{ ??????this.fileForm?=?{?...data?} ????}, ????handleRemove(file,?fileList)?{ ??????console.log(file,?fileList) ????}, ????handlePreview(file)?{ ??????console.log(file) ????}, ????handleClose()?{ ??????this.fileForm?=?{ ????????name:?'' ??????} ??????this.$emit('update:visible',?false) ????}, ????handleAvatarSuccess(data)?{ ??????console.log(data) ????}, ????beforeAvatarUpload(data)?{ ??????console.log(data) ????}, ????submitForm()?{ ??????if?(this.onSuccess)?{ ????????this.onSuccess(this.fileForm) ??????}?else?{ ????????this.$emit('callback',?this.fileForm) ??????} ????} ??} } </script> <style?lang="scss"?scoped> ::v-deep?.el-form-item__content?{ ??display:?flex; ??.el-button?{ ????margin-left:?16px; ??} } </style> ```