list.vue
<el-table>
<el-table-column label="图片">
<template slot-scope="{ row }">
<div v-if="row.pics">
<img :src="JSON.parse(row.pics).url" style="width: 100px; height: 100px">
</div>
<div v-else>暂无</div>
</template>
</el-table-column>
</el-table>
edit.vue
<el-form>
<el-form-item label="图片" prop="fileList">
<div style="width: 30%">
<el-upload
class="upload-demo"
action="/file/upload"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
accept=".jpg,.jpeg,.png,.JPG,.JPEG"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</el-form-item>
</el-form>
<script>
import { villageTownInfoupdate, villageTownInfoget } from '@/api/introduce'
export default {
data() {
var fileList = (rule, value, callback) => {
if (this.fileList.length === 0) {
callback(new Error('请选择图片上传'))
} else {
callback()
}
}
return {
fileList: [],
form: {
id: '',
townName: '',
pics: '',
introduce: ''
},
rules: {
fileList: [{ required: true, validator: fileList }]
}
}
},
created() {
villageTownInfoget({
id: this.$route.query.id
}).then((response) => {
if (response.data.pics !== null) {
this.fileList.push(JSON.parse(response.data.pics))
}
this.form.id = this.$route.query.id
this.form.townName = response.data.townName
this.form.introduce = response.data.introduce
// this.form.pics = response.data.pics
// this.fileList = JSON.parse(this.form.pics)
// this.image = this.fileList[0].url
})
},
methods: {
handleSuccess(response, file, fileList) {
if (response.code === 200) {
this.fileList.push({
name: '图片',
url: response.data
})
this.$message({
message: '上传成功',
type: 'success'
})
} else {
this.$message.error(response.msg)
fileList.splice(fileList.length - 1, 1)
}
},
handlePreview(file) {
console.log(file)
},
handleRemove(file, fileList) {
console.log(file)
if (this.fileList.length > 0) {
for (var i = 0; i < this.fileList.length; i++) {
if (file.url === this.fileList[i].url) {
this.fileList.splice(i, 1)
}
}
console.log(this.fileList)
}
},
beforeRemove(file, fileList) {
console.log(this.fileList)
return this.$confirm('确定移除文件' + file.name + '？')
},
handleExceed(files, fileList) {},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// this.form.pics = this.fileList[0]
console.log(this.fileList)
villageTownInfoupdate({
id: this.form.id,
townName: this.form.townName,
pics: JSON.stringify(this.fileList[0]),
introduce: this.form.introduce
}).then((response) => {
// if (response.data.pics !== null) {
// this.fileList.push(response.data.pics)
// }
if (response.status) {
this.$message({
message: '修改成功',
type: 'success'
})
this.goto('/introduce/list')
} else {
this.$message.error(response.msg)
}
})
} else {
return false
}
})
},
goto(val) {
this.$router.push({
path: val
})
}
}
}
</script>
api.js
import { dataToFormData } from '@/utils'
export function villageTownInfoupdate(data) {
return request({
url: '/villageTownInfo/update',
method: 'post',
data: dataToFormData(data)
})
}
