<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"> <el-button size="small" type="primary">點擊上傳</el-button> <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div></el-upload><script> export default { data() { return { fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); } } }</script>上面是element-ui的官方組件
1 回答
慕俠2389804
TA貢獻1719條經(jīng)驗 獲得超6個贊
看了一下源碼，file 里有個屬性 raw , 其實就是rawFile
把鉤子掛在preview 上為例：
previewBanner(file){
let reader = new FileReader()
reader.onload = () => {
let _base64 = reader.result
doWhatUWant(_base64)//就可以做你想做的啦?。?！
}
reader.readAsDataURL(file.raw)
}