element-ui-——el-uploadexcel導入

佈局文件:(選擇文件放在了彈框內部——即點擊導入按鈕後彈框顯示,先下載模板再選擇文件點擊提交按鈕才上傳)vue

<div class="emImport_container">
<el-dialog :title="meta.title" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
<el-upload
:ref="system_id"
v-loading="uploadLoading"
class="upload-demo"
:action="action" (action: 導入文件的url地址)
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:headers="headers" (headers: 請求頭)
name="file" (文件名)
accept=".xlsx "
:on-error="uploadFileError"
:on-success="uploadFileSuccess"
:auto-upload="false"
:http-request="uploadFile"
:on-change="fileChange"
>
<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="downloadModel">下載模板</el-button>
<div slot="tip" class="el-upload__tip">請先下載模板,再選擇文件上傳!</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button class="em-button" @click="cancelUpload">取 消</el-button>
<el-button type="primary" class="em-button" @click="submitUpload">提交</el-button>
</div>
</el-dialog>
</div>

 模板下載及文件導入:json


<script>
import vueBus from '@/utils/vueBus'
import { emMixin } from '@/utils/mixins'
import { dataInitFn, childrenInitFn } from '@/utils/tool'
import { uploadFile } from '@/api/schoolService/parentInfo'
export default {
name: 'EmImport',
mixins: [emMixin],
data() {
return {
set: {
downloadUrl: '', // 模板下載url地址
importUrl: ''// 導入文件url地址
},
fileList: [], // 文件列表
dialogFormVisible: false,
headers: {
'Content-Type': 'multipart/form-data'
},
uploadLoading: '',
action: '',
files: [] // 選擇文件
}
},
created() {
this.init()
},
methods: {
init() {
this.set = dataInitFn(this.set, this.meta)
this.children = childrenInitFn(this.children, this.componentData)
},
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePreview(file) {
console.log(file)
},
uploadFileError(err, file, fileList) {
console.log(err)
this.$message.error('文件導入失敗')
},
uploadFileSuccess(response, file, fileList) {
console.log(response.data.jsonmsg.ERRORMSG)
if (response.data.jsonmsg.ERRORMSG === '') {
this.$message({
message: '恭喜你,導入成功',
type: 'success'
})
this.init()
this.dialogFormVisible = false
} else {
this.$message({
message: response.data.jsonmsg.ERRORMSG.slice(response.data.jsonmsg.ERRORMSG.indexOf('=') + 1),
type: 'error'
})
}
},
downloadModel() { // 下載導出須要的模板
window.location.href = process.env.VUE_APP_BASE_API + this.set.downloadUrl // process.env.VUE_APP_BASE_API :基礎地址(env.development文件中的 base api地址


},
// 導入csv
import() {
this.dialogFormVisible = true
this.action = process.env.VUE_APP_BASE_API + this.set.importUrl // 尤其重要,不然action是沒有值的
},
fileChange(file) {
this.files.push(file.raw) // 上傳文件變化時將文件對象push進files數組
},
// 上傳文件
uploadFile(params) {
if (this.files) {
const formData = new FormData() // new一個formData對象
this.files = params.file (這裏必定是params.file,傳遞給後臺的應是file:(binary); 不是this.files,,不然傳遞給後臺的是file:Undefined)
formData.append('file', this.files)
uploadFile({
url: process.env.VUE_APP_BASE_API + this.set.importUrl, //導入文件地址
params: formData (參數必須是formData)
}).then(response => {
console.log('導入結果', response)
if (response.statusCode === 200) {
this.$notify({
message: '數據導入成功',
type: 'success'
})
this.dialogFormVisible = false
vueBus.$emit('query')
} else {
this.$notify.error('數據導入失敗')
}
})
}
},
submitUpload(event) {
this.$refs[this.system_id].submit() // 提交按鈕
},
cancelUpload() {
this.dialogFormVisible = false
this.$message.info('已取消上傳')
}
}
}
</script>
接口地址:
export function uploadFile(obj) {
return request({
url: obj.url,
method: 'post',
data: obj.params
})
}

總結:請求頭格式必定是:content-Type:multipart/form-data; 不然導入會失敗;傳遞的參數:params必定是formData(表單對象)
相關文章
相關標籤/搜索