用的是Element中的Upload組件實現(xiàn)功能
<!-- action表示圖片要上傳到的后臺api接口 地址一定要是后臺的根地址加上請求地址-->
<!-- on-preview事件的作用是點擊預(yù)覽圖片-->
<!-- on-remove事件的作用是刪除圖片 -->
<!-- list-type指定當(dāng)前預(yù)覽組件的呈現(xiàn)方式 -->
<el-upload class="upload-demo" action="http://127.0.0.1:8888/api/private/v1/upload"
:on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
<script>
data(){
return {
}
},
methods:{
// 處理圖片預(yù)覽效果
handlePreview(){
},
// 處理移除圖片的操作
handleRemove(){
},
}
</script>
路徑那里是axios請求根路徑和接口文檔里面后端給的路徑拼接的
檢測能否上傳成功
只要看到這個就證明這張圖片并沒有上傳成功
我已經(jīng)通過axios的request攔截器為每一個請求都掛載了一個Authorization也就是token，掛載了這個也就說明每一個axios請求都會追加一個token
但是為什么配置了token還是顯示無效的token呢？
是因為在調(diào)用upload組件上傳圖片在發(fā)ajax的時候沒有用到axios，這個組件內(nèi)部自己封裝了ajax，我們需要通過headers屬性手動為他綁定一個請求頭。文章來源：http://www.zghlxwxcb.cn/news/detail-525075.html
<script>
data(){
return {
// 頭片上傳組建的headers請求頭對象
headerObj:{
Authorization:window.sessionStorage.getItem('token')
},
}
},
methods:{
// 處理圖片預(yù)覽效果
handlePreview(){
},
// 處理移除圖片的操作
handleRemove(){
},
}
</script>
現(xiàn)在就可以上傳成功了
文章來源地址http://www.zghlxwxcb.cn/news/detail-525075.html
到了這里，關(guān)于Vue上傳圖片功能【element ui】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
