<template>
|
<div>
|
<h2>欢迎进入后台管理系统</h2>
|
|
<el-upload ref="upload" action accept="image/*" :limit="3" :file-list="filelist" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="upload">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisible">
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
</el-dialog>
|
<el-button @click="save">保存</el-button>
|
</div>
|
</template>
|
|
<script>
|
import { fileUpload, update } from '../../api/api'
|
export default {
|
data() {
|
return {
|
// fileList: []
|
imageUrl: '',
|
filelist: [],
|
delList: [],
|
dialogVisible: false,
|
dialogImageUrl: ''
|
}
|
},
|
methods: {
|
save() {
|
//取到图片集合
|
let uploadImglist = this.$refs.upload.uploadFiles
|
console.log(uploadImglist)
|
let formData = new FormData()
|
uploadImglist.forEach(item => {
|
//ready状态的是未上传的 success是已经上传成功的，只需要添加未上传的即可
|
if (item.status == 'ready') {
|
formData.append('file', item.raw)
|
}
|
})
|
formData.get('file')
|
fileUpload(formData).then(res => {
|
//上传接口
|
console.log(res)
|
})
|
},
|
// 预览图片
|
handlePictureCardPreview(file) {
|
this.dialogVisible = true
|
this.dialogImageUrl = file.url
|
console.log(this.dialogImageUrl)
|
},
|
// 删除图片
|
handleRemove(file) {
|
//判断状态，如果是上传成功的 需要把id加到删除id集合里面
|
if (file.status == 'success') {
|
this.delList.push(file.id)
|
}
|
},
|
upload() {}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped></style>
|
