Vue与Springboot项目中实现文件或图片的上传

Vue项目中实现点击按钮弹出对话框上传文件

以轮播图图片更改为例

html

<template>
<div style="width: 100%">
  <el-table :data="imageArr" style="margin: 0 auto "  >
    <el-table-column align="center" type="index" label="轮播图编号" style="text-align: center" width="200px"></el-table-column>

    <el-table-column align="center" label="图片">
      <template slot-scope="scope">
        <img :src="BASE_URL+scope.row.imgUrl" width="500px" height="250px">
      </template>
    </el-table-column>

    <el-table-column align="center" prop="createTime" label="创建时间" style="text-align: center"></el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        <el-button type="danger" size="small" @click="update(scope.row.id)">更改</el-button>



      </template>
    </el-table-column>
  </el-table>
<!--图片上传弹出框 -->
  <el-dialog
      title="更改轮播图"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <el-upload

        :action="this.BASE_URL+'/v1/uploadBanner'"
        list-type="picture-card"

        :on-remove="handleRemove"
        :on-success="handlerSuccess">

      <i class="el-icon-plus"></i>
    </el-upload>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>



</div>
</template>

js

export default {
  data() {
    return {
      dialogVisible:false,
      imageArr:[],
      banner:{}
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    selectAllPicture() {
      let url=this.BASE_URL+'/v1/banners/selectAll'
      this.axios.get(url).then(res=>{
        if (res.data.code==1){
          this.imageArr=res.data.data
          console.log(this.imageArr)
        }else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //删除图片
    handleDelete(row){
      let id=row.id
      let url=this.BASE_URL+'/v1/banners/delete/?id='+id
      this.axios.delete(url).then(
          res=>{
            if (res.data.code==1){
              this.$message.success("删除成功")
              //刷新
              location.reload()
            }else {
              this.$message.error("删除失败")
            }
          }
      )
    },
    update(id){
      this.banner.id=id;
      this.dialogVisible = true
    },
    //处理服务器中的图片
    handleRemove(file) {
      //console.log(file);
      this.axios.post(this.BASE_URL+'/v1/remove?url='+file.response.data)
          .then(res=>{
            if(res.data.code == 1){
              this.$message.success("删除服务的图片成功！！")
            }else{
              this.$message.error(res.data.msg)
            }
          })
    },

    //将需要上传的图片的位置给内容的图片的位置 保存到数据库
    handlerSuccess(response,file,fileList){
      console.log(file)
      // 如果路径中包含图片
      if(file.raw.type.includes('image')){
        this.banner.imgUrl = response.data;
        let url=this.BASE_URL+"/v1/banners/update"
        this.axios.put(url,this.qs.stringify(this.banner)).then(res=>{
          if(res.data.code==1){
            this.$message.success("修改成功")
            location.reload()
          }
        })
      }else {
        this.c.videoUrl=response.data
      }
    },
  },
  mounted() {
    this.selectAllPicture()
  },
}