就是我每次上傳圖片中間會空白一下然后在過去，
<template>
<panel>
<template #header>
<span>店鋪管理</span>
</template>
<template #body>
<el-form ref="form" :model="storeForm" label-width="80px" size="mini">
<el-form-item label="店鋪名稱">
<el-input v-model="storeForm.name"></el-input>
</el-form-item>
<el-form-item label="店鋪公告">
<el-input type="textarea" v-model="storeForm.tips"></el-input>
</el-form-item>
<el-form-item label="店鋪頭像">
<el-upload
class="avatar-uploader"
action="http://127.0.0.1:5000/users/avatar_upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="storeForm.imageUrl"
:src="https://bbs.csdn.net/topics/
'http://127.0.0.1:5000/upload/imgs/acc_img/' +
storeForm.imageUrl
"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="店鋪圖片">
<el-upload
action="http://127.0.0.1:5000/shop/upload"
list-type="picture-card"
:file-list="storeForm.imgUrl"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="https://bbs.csdn.net/topics/dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
<el-form-item label="配送費">
<el-input v-model="storeForm.price"></el-input>
</el-form-item>
<el-form-item label="配送時間">
<el-input v-model="storeForm.time"></el-input>
</el-form-item>
<el-form-item label="配送描述">
<el-input v-model="storeForm.desc"></el-input>
</el-form-item>
<el-form-item label="店鋪評分">
<el-input v-model="storeForm.rate"></el-input>
</el-form-item>
<el-form-item label="銷量">
<el-input v-model="storeForm.sellCount"></el-input>
</el-form-item>
<el-form-item label="活動">
<el-checkbox-group v-model="storeForm.active">
<el-checkbox
v-for="item in activeArr"
:key="item"
:label="item"
></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="營業時間">
<el-time-picker
is-range
v-model="storeForm.date"
range-separator="至"
start-placeholder="開始時間"
end-placeholder="結束時間"
placeholder="選擇時間范圍"
>
</el-time-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="editForm"
>確認修改</el-button
>
</el-form-item>
</el-form>
</template>
</panel>
</template>
<script>
import moment from 'moment'
import panel from '../../components/panel.vue'
import { getStoreInfo, editStore } from '../../api/store.js'
export default {
components: {
panel
},
data() {
return {
storeForm: {
name: '',
tips: '',
// 店鋪頭像
imageUrl: '',
// 店鋪圖片
imgUrl: [],
price: '',
time: '',
desc: '',
rate: '',
sellCount: '',
active: [],
date: []
},
activeArr: [
'在線支付滿28減5',
'VC無限橙果汁全場8折',
'單人精彩套餐',
'特價飲品8折搶購',
'單人特色套餐'
],
dialogVisible: false,
dialogImageUrl: '',
baseImg: 'http://127.0.0.1:5000/upload/shop/',
shopAvatar: ''
}
},
created() {
this.getShop()
},
methods: {
async getShop() {
const { data } = await getStoreInfo()
const imgArr = []
// 把請求回來的圖片串列處理成想要的陣列格式
data.pics.forEach(item => {
imgArr.push({
url: this.baseImg + item,
path: item
})
})
this.storeForm = {
id: data.id,
name: data.name,
tips: data.bulletin,
// 店鋪頭像
imageUrl: data.avatar,
// 店鋪圖片
imgUrl: imgArr,
price: data.deliveryPrice,
time: data.deliveryTime,
desc: data.description,
rate: data.score,
sellCount: data.sellCount,
active: data.supports,
date: data.date
}
},
handleAvatarSuccess(res, file) {
this.storeForm.imageUrl = res.imgUrl
this.shopAvatar = res.imgUrl
},
beforeAvatarUpload(file) {
const arr = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
// const isJPG = file.type === 'image/jpeg'
const isJPG = arr.includes(file.type)
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過 2MB!')
}
return isJPG && isLt2M
},
handleRemove(file, fileList) {
// console.log(file, fileList)
this.storeForm.imgUrl = this.storeForm.imgUrl.filter(
item => item.uid !== file.uid
)
console.log(this.storeForm.imgUrl)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleSuccess(res) {
// console.log(res)
this.storeForm.imgUrl.push({
url: this.baseImg + res.imgUrl,
path: res.imgUrl
})
},
// 確認修改
async editForm() {
const shopImgs = []
this.storeForm.imgUrl.forEach(item => {
shopImgs.push(item.path)
})
// 處理時間
const timeArr = []
this.storeForm.date.forEach(item =>
timeArr.push(moment(item).format('YYYY-MM-DD HH:mm:ss'))
)
// 收集和整理請求引數
const editData = {
id: this.storeForm.id,
name: this.storeForm.name,
bulletin: this.storeForm.tips,
// 店鋪頭像
avatar: this.shopAvatar || this.storeForm.imageUrl,
// 店鋪圖片
pics: JSON.stringify(shopImgs),
deliveryPrice: this.storeForm.price,
deliveryTime: this.storeForm.time,
description: this.storeForm.desc,
score: this.storeForm.rate,
sellCount: this.storeForm.sellCount,
supports: JSON.stringify(this.storeForm.active),
date: JSON.stringify(timeArr)
}
const data = await editStore(editData)
if (data.code === 0) {
this.$message.success('修改店鋪資訊成功！')
location.reload()
}
}
}
}
</script>
<style lang="less" scoped>
.el-input {
width: 350px;
}
/deep/ textarea {
width: 350px;
height: 120px;
resize: none;
}
/deep/ .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
margin-top: 20px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 128px;
height: 128px;
line-height: 128px;
text-align: center;
}
.avatar {
width: 128px;
height: 128px;
display: block;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/195552.html
標籤：其他
上一篇：求一個JSON書寫格式是否正確？