Vuetify中檔案上傳元件
阿新 • • 發佈:2019-01-13
1.示例:
1.1.單圖片上傳:
<v-upload
v-model="brand.image"
url="/item/upload"
:multiple="false"
:pic-width="150"
:pic-height="150"
/>
上傳前:
上傳後:
1.2.多圖片上傳
示例:
<v-upload
v-model="brand.image"
url ="/item/upload"
/>
效果:
2.屬性列表:
屬性名 | 說明 | 資料型別 | 預設值 |
---|---|---|---|
url | 上傳檔案的目標路徑 | String | 無 |
value | 上傳成功的返回結果 | 單圖片上傳是String。多圖片上傳是String陣列 | 無 |
multiple | 是否執行多圖片上傳 | Boolean | true |
picWidth | 單圖片上傳後的預覽寬度 | Number | 150 |
picHeight | 單圖片上傳後的預覽高度 | Number | 150 |
3.說明
可以通過v-model雙向繫結,來獲取圖片上傳的結果:
- 單圖片上傳時,value值是一個圖片地址
- 多圖片上傳時,value值是一個圖片地址陣列
- 檔案上傳的引數名是:file
- 檔案上傳的返回值,就是圖片的url路徑