<el-upload
class="upload-demo"
ref="upload"
action="http://xxx.xx.xx.xx:8080/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-exceed="handleExceed"
:on-success="fileUploadSuccess"
:on-change="imgPreview"
:limit="1"
:file-list="fileList"
:auto-upload="false">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
<img v-if="posterURL" :src="posterURL" width="600" height="600" class="avatar">
export default {
data() {
return {
postURL: ''
}
},
methods: {
...
imgPreview(file, fileList) {
let fileName = file.name;
let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test(fileName.toLowerCase())) {
this.posterURL = URL.createObjectURL(file.raw) // 獲取URL
} else {
this.$message.error('請選擇圖片文件');
}
},
...
}
}
獲取Element ui 上傳圖片的URL顯示上傳圖片
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.