<el-form-item
label="赛事icon"
prop="league_icon">
<el-upload
class="upload-demo"
action="#"
:multiple="false"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:limit="2"
:on-change="handleChange"
accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
:auto-upload="false"
ref="upload">
<el-button
slot="trigger"
size="small"
type="primary">
选取文件
</el-button>
<div
slot="tip"
class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
</el-form-item>
data() {
return {
fileList: []
}
}
methods: {
beforeAvatarUpload(file) {
const fileType = file.raw.type;
const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png';
const isLt20M = file.raw.size / 1024 / 1024 < 20;
if (!isJPG) {
this.$message.error('上传图片的格式只能是 JPG或PNG 格式!');
}
if (!isLt20M) {
this.$message.error('上传图片的大小不能超过 20M!');
}
return isJPG && isLt20M;
},
handleRemove(file) {
const index = this.fileList.indexOf(file.url);
this.fileList.splice(index, 1);
},
/**
* 上传图片
* @param {Object} file 文件对象
* @param {string} fileList 文件列表
* @return {void} 空
*/
handleChange(file, fileList) {
const isFileType = this.beforeAvatarUpload(file);
// 如果文件类型不对,则清空表单及附件列表
if (!isFileType) {
this.fileList = [];
return;
}
if (fileList.length > 1) {
fileList.shift();
}
this.fileList = fileList;
},
async submitForm() {
const formData = new FormData();
if (this.fileList.length > 0) {
formData.append('file', this.fileList[0].raw);
}
const result = await this.$http.post(httpUrlList.createLeagues, formData);
console.log(result);
if (result.data) {
this.$message.success('success');
setTimeout(() => {
this.$router.push({ name: 'competitionSeason' });
}, 1000);
}
},
}