<template>
? <div>
? ? <el-form
? ? ? :model="formData"
? ? ? label-width="80px"
? ? >
? ? ? <el-form-item
? ? ? ? label="科目名稱"
? ? ? ? prop="name"
? ? ? >
? ? ? ? <el-input v-model="formData.name" />
? ? ? </el-form-item>
? ? ? <el-form-item label="上傳文件">
? ? ? ? <el-upload
? ? ? ? ? action
? ? ? ? ? :http-request="httpRequest"
? ? ? ? ? :before-upload="beforeUploadClick"
? ? ? ? ? :on-exceed="handleExceed"
? ? ? ? ? :limit="2"
? ? ? ? ? multiple
? ? ? ? ? :show-file-list="false"
? ? ? ? >
? ? ? ? ? <el-button
? ? ? ? ? ? slot="trigger"
? ? ? ? ? ? size="small"
? ? ? ? ? ? type="primary"
? ? ? ? ? >選取文件</el-button>
? ? ? ? </el-upload>
? ? ? </el-form-item>
? ? ? <el-form-item>
? ? ? ? <el-button
? ? ? ? ? type="primary"
? ? ? ? ? @click="saveClick"
? ? ? ? >保存</el-button>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>

<script>
import axios from 'axios'
export default {
? data() {
? ? return {
? ? ? formData: { name: '' },
? ? ? fileList: []
? ? }
? },
? methods: {
? ? // 重寫(xiě)文件上傳方法,覆蓋原有的上傳方法，將上傳的文件依次添加到fileList數(shù)組中
? ? httpRequest(option) {
? ? ? this.fileList.push(option)
? ? },
? ? ?// 上傳前處理
? ? beforeUploadClick(file) {
? ? },
? ? // 文件數(shù)量過(guò)多時(shí)提醒
? ? handleExceed() {
? ? ? this.$message({ type: 'info', message: '最多支持2個(gè)附件上傳' })
? ? },
? ? // 表單提交
? ? async saveClick() {
? ? ? // 使用form表單的數(shù)據(jù)格式
? ? ? const paramsData = new FormData()
? ? ? // 將上傳文件數(shù)組依次添加到參數(shù)paramsData中
? ? ? this.fileList.forEach((it, index) => {
? ? ? ? paramsData.append(`file${index}`, it.file)
? ? ? });
? ? ? // 將表單數(shù)據(jù)添加到參數(shù)paramsData中
? ? ? paramsData.append('name', this.formData.name)
? ? ? // 表單數(shù)據(jù)和文件一起上傳,調(diào)用后端接口
? ? ? const res = await axios({
? ? ? ? url: '后端接口地址',
? ? ? ? method: 'post',
? ? ? ? data: paramsData
? ? ? })
? ? }
? }
}
</script>

<el-form-item label="logo" prop="logo">
? ? ? ? <el-upload
? ? ? ? ? class="upload-demo"
? ? ? ? ? ref="upload"
? ? ? ? ? action="string"
? ? ? ? ? accept="image/jpeg,image/png,image/jpg"
? ? ? ? ? list-type="picture-card"
? ? ? ? ? :before-upload="onBeforeUploadImage"
? ? ? ? ? :http-request="UploadImage"
? ? ? ? ? :on-change="fileChange"
? ? ? ? ? :file-list="fileList"
? ? ? ? >?
? ? ? ? ? <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
? ? ? ? ? <div slot="tip" class="el-upload__tip">只能上傳jpg/jpeg/png文件，且不超過(guò)500kb</div>
? ? ? ? </el-upload>
? ? ? </el-form-item>

data() {
? ? fileList: [],
? ? logo: '',
}
methods: {
? ? onBeforeUploadImage(file) {
? ? ? const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
? ? ? const isLt1M = file.size / 1024 / 1024 < 1
? ? ? if (!isIMAGE) {
? ? ? ? this.$message.error('上傳文件只能是圖片格式!')
? ? ? }
? ? ? if (!isLt1M) {
? ? ? ? this.$message.error('上傳文件大小不能超過(guò) 1MB!')
? ? ? }
? ? ? return isIMAGE && isLt1M
? ? },
? ? UploadImage(param){
? ? ? const formData = new FormData()
? ? ? formData.append('file', param.file)
? ? ? UploadImageApi(formData).then(response => {
? ? ? ? ? console.log('上傳圖片成功')
? ? ? ? param.onSuccess() ?// 上傳成功的圖片會(huì)顯示綠色的對(duì)勾
? ? ? ? // 但是我們上傳成功了圖片， fileList 里面的值卻沒(méi)有改變，還好有on-change指令可以使用
? ? ? }).catch(response => {
? ? ? ? console.log('圖片上傳失敗')
? ? ? ? param.onError()
? ? ? })
? ? },
? ? fileChange(file){
? ? ? this.$refs.upload.clearFiles() //清除文件對(duì)象
? ? ? this.logo = file.raw // 取出上傳文件的對(duì)象，在其它地方也可以使用
? ? ? this.fileList = [{name: file.name, url: file.url}] // 重新手動(dòng)賦值filstList， 免得自定義上傳成功了, 而fileList并沒(méi)有動(dòng)態(tài)改變， 這樣每次都是上傳一個(gè)對(duì)象
? ? },
}