vue图片上传编辑

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)

  })

}