<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)
}
}
----------------------
