<template>
<div class="home">
<!-- <h2>Upload 上传</h2> -->
<!--
before-upload: 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
on-success: 文件上传成功时的钩子 function(response, file, fileList)
on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList)
on-exceed：定义超出限制时的行为 function(files, fileList), limit的时候有用
limit：限制上传文件的个数 最大允许上传个数 number
multiple: 是否支持多选文件 boolean
on-preview：点击文件列表中已上传的文件时的钩子
before-remove：阻止文件移除操作 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 function(file, fileList)
on-remove: 文件列表移除文件时的钩子 function(file, fileList)
file-list: 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
-->
<el-upload
class="upload-demo"
ref="fileUpload"
:action="url"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-change="fileListChange"
:on-exceed="handleExceed"
multiple
:on-preview="handlePreview"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:file-list="fileList"
accept=".xls, .xlsx"
>
<el-button type="primary" :loading="提交中">这里点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<br><br><br>
<p>{{fileName}}</p>
<p>{{fileUrl}}</p>
</div>
</template>
<script>
import url from '@/assets/js/interfaceURL.js'
export default {
name: 'home',
data () {
return {
url: url.Common.baseUrl + url.Common.getImgUrl,
fileList: [],
fileName: '',
fileUrl: '',
提交中: false
}
},
methods: {
beforeUpload (file) {
this.提交中 = true
let isLimit = file.size / 1024 / 1024 < 50
if (!isLimit) {
this.$message.error('文件最大限制50M！')
}
return isLimit
},
uploadSuccess (response, file, fileList) {
if (response.code && response.code === '1') {
this.提交中 = false
fileList.splice(0, fileList.length - 1)
this.fileList[0] = file
this.fileUrl = response.data.imageUrl[0]
this.fileName = file.name
} else {
this.提交中 = false
this.fileList = []
this.fileUrl = ''
this.fileName = ''
this.$message.error('上传文件格式有误，请使用模板重新提交！')
}
},
fileListChange (file, fileList) {
},
handleExceed (files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
handlePreview (file) {
console.log('handlePreview', file)
},
beforeRemove (file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
handleRemove (file, fileList) {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
------------------------------
<el-upload
class="avatar-uploader"
:action="url"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
data () {
return {
url: url.Common.baseUrl + url.Common.getImgUrl,
imageUrl: ''
}
},
methods: {
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
handleAvatarSuccess (res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
}
}
----------------------
