html內容

<!-- 圖片上傳 --><el-row><el-col :span="24"><el-form-item label="LOGO" prop="logoImg"><el-uploadclass="upload-demo"ref="upload"name="logoImg":action="action":on-success="uploadSuccess"multiple:accept="accept":limit="1":show-file-list="false":on-exceed="handleExceed":on-progress="uploading":file-list="fileList":before-upload="beforeAvatarUpload"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip" style="color:#F00">注：只能上傳jpg/png文件，圖片尺寸必須377mm x 60mm, 且不超過500KB</div></el-upload></el-form-item><el-form-item v-show="imgShow"><img :src="imgSrc" style="width: 300px"></el-form-item></el-col></el-row>

針對up-load組件，官網有詳細的解釋文檔，可以看這里

我大概解釋下用到的屬性事件等

name ：?為上傳的文件字段名（上傳接口入參的字段名）

action ： 為文件的上傳地址，可以在data中定義，mounted鉤子函數中對其賦值，寫入后端給定的一個地址即可

data () {return {action: '',// 如果在html中攜帶accept則默認選擇規定類型的文件，否則可以在鉤子函數中判斷上傳的文件類型accept: ".jpg,.png", // .doc,.docx,.ppt,.xls,.xlsx,.wps,.dps,.pdf,.txt,fileList: [],} }, mounted () {this.action = process.env.BASE_API + '/upload/dept/logo'// process.env.BASE_API為config文件下開發環境BASE_API配置地址// 或者也可以這樣寫 this.action = 'http://......'

on-success ： 為文件上傳成功時調用的函數

uploadSuccess(res) { // 圖片上傳成功后即調用的函數console.log('圖片上傳成功' + JSON.stringify(res))if (res.code === 0) {// sysUser為form表單對象，當上傳成功后，后端會動將圖片存儲在數據庫，數據庫會自動為該圖片生成一個名字，// 提交form表單時需要向后臺發送服務器生成的圖片名的字段this.sysUser.logoImg = res.data.uploadUrl// 圖片上傳成功之后可以拿到服務器生成的圖片名，賦值給表單對象，提交時再傳遞給后臺// console.log('上傳到服務器照片名' + this.sysUser.logoImg)this.$message({message: '上傳成功',type: 'success',duration: 1000})// 上傳成功后為當前頁面中的img賦值src，即照片回顯（回顯的地址是后臺傳遞給前端的）this.imgShow = truethis.imgSrc = process.env.UPLOAD_API + res.data.uploadUrl// console.log(this.imgSrc)} else {this.$message({message: res.msg,type: 'error',duration: 1000})// this.$message.error(res.msg)}this.confirmLoading = falsethis.$refs.upload.clearFiles()}

multiple ： 表示是否支持多選文件

limit ： 為最大允許上傳個數

show-file-list ： 表示是否顯示已上傳文件列表

on-exceed ： 為文件超出個數限制時執行的函數

handleExceed(files, fileList) { // 文件超出個數限制的鉤子console.log(files)console.log(fileList)this.$message({message: `當前限制選擇1個文件，本次選擇了 ${files.length}個文件，共選擇了${files.length + fileList.length}個文件`,type: 'warning',duration: 1000})}

on-progress ： 為文件正在上傳時執行的函數

uploading() { // 文件上傳時的鉤子console.log('正在上傳...')this.confirmLoadig = true }

file-list ： 為上傳的文件列表

before-upload： 為上傳文件之前的鉤子，參數為上傳的文件

beforeAvatarUpload(file) { // 上傳文件之前的鉤子,限制用戶上傳的圖片格式和大小var _this = thisreturn new Promise(function(resolve, reject) {var reader = new FileReader()reader.onload = function(event) {var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)const extension = testmsg === 'jpg'const extension2 = testmsg === 'png'const isLt2M = file.size / 1024 / 1024 < 0.5if (!extension && !extension2) {_this.$alert('上傳文件只能是 jpg、png格式!', '提示', { confirmButtonText: '確定' })reject()}if (!isLt2M) {_this.$alert('上傳文件大小不能超過 500KB!', '提示', { confirmButtonText: '確定' })reject()}var image = new Image()image.onload = function() {var width = this.widthvar height = this.height// console.log(width)// console.log(height)if (width > 378 || width < 376) {_this.$alert('圖片尺寸必須377 x 60mm !', '提示', { confirmButtonText: '確定' })reject()} else if (height > 61 || height < 59) {_this.$alert('圖片尺寸必須377 x 60mm !', '提示', { confirmButtonText: '確定' })reject()} else {resolve()}}image.src = event.target.result}reader.readAsDataURL(file)})// return extension || extension2 && isLt2M}

這里面涉及一個 FileReader，詳情可以看這里

我當時涉及的問題就是后端與前端的配合，因為有測試地址和正式地址的區別，所以需要確認好上傳的具體路徑，

還有就是后端需要確認上傳的文件夾確實存在，細節問題一定要注意好。

總結

以上是生活随笔為你收集整理的ElementUI图片上传 回显的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。