您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“elementUI怎么使用el-upload上傳文件”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
Element Upload官方文檔:el-upload
本地上傳想要回顯圖片視頻,使用on-success
是沒(méi)辦法再在上傳后獲取到本地文件路徑后進(jìn)行回顯的,因?yàn)橹挥性谏蟼鞯?code>action成功,即不報(bào)錯(cuò)的情況下才會(huì)調(diào)用,本地上傳用的action="#
這個(gè)接口不存在,所以也不會(huì)上傳成功,更不會(huì)調(diào)用獲取到文件參數(shù)進(jìn)行回顯
如果想要先在本地進(jìn)行回顯,然后再上傳的話,需要使用on-change
鉤子(還需:auto-upload ="false"
)獲取文件本地路徑,再生成一個(gè)formData
傳給后端上傳文件的接口,
官方文檔中提供的上傳圖片接口https://jsonplaceholder.typicode.com/posts/
現(xiàn)已無(wú)法使用
下面給大家總結(jié)幾種常用的上傳文件方法:
這種上傳單張圖片的運(yùn)行場(chǎng)景一般是上傳頭像,沒(méi)有刪除功能,只能進(jìn)行替換
<el-upload class="avatar-uploader" action="后端上傳接口" :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> <style> /deep/ .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style> <script> export default { data() { return { imageUrl: '' }; }, methods: { // 上傳成功后的回顯 handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); }, // 上傳前對(duì)類型大小的驗(yàn)證 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('上傳頭像圖片大小不能超過(guò) 2MB!'); } return isJPG && isLt2M; } } } </script>
可以手動(dòng)上傳,也可以拖拽上傳,圖片可以在沒(méi)有后端上傳接口時(shí)進(jìn)行回顯,可刪除
template:
<el-upload drag action="#" :show-file-list="false" :auto-upload="false" :on-change="uploadFile" accept="image/jpg,image/jpeg,image/png" > <i v-if="imageUrl1" class="el-icon-circle-close deleteImg" @click.stop="handleRemove1" ></i> <img v-if="imageUrl1" :src="imageUrl1" class="avatar" /> <div v-else> <i class="el-icon-picture" ></i> <div class="el-upload__text1">上傳圖片</div> <div class="el-upload__text">* 建議尺寸比例2.2:1,不超過(guò)4m,</div> <div class="el-upload__text">格式為png、jpeg或jpg</div> </div> </el-upload> <style scoped> .deleteImg { font-size: 30px; position: absolute; top: 0; right: 0; z-index: 999; } </style>
data:
data() { return { imageUrl1: '' }; },
method:
uploadFile(item) { console.log(item); let formData = new FormData(); let file = item.raw; this.imageUrl1 = URL.createObjectURL(file); formData.append("file", file); // 傳formData給后臺(tái)就行 // 比如 // 接口(formData).then(res=>{ // this.videoUrl=res.url // }) }, // 刪除只需清空imageUrl1即可 handleRemove1(file, fileList) { // console.log(file, fileList); this.imageUrl1 = ""; },
list-type="picture-card"
hover會(huì)自動(dòng)有預(yù)覽刪除菜單,不需自己寫樣式,綁定事件即可
<el-upload action="后端接口地址" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> <script> export default { data() { return { dialogImageUrl: '', dialogVisible: false }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; } } } </script>
“elementUI怎么使用el-upload上傳文件”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。