el-upload 上传图片

第一：看看页面效果.

 

 上传图片后效果如下：

 

 第二步：页面代码：

          <el-row>
                <el-col :span="24">
                  <el-form-item label-width="120px" label="封面图:" class="postInfo-container-item">
                    <el-upload
                      :action="uploadImgsAction()"
                      list-type="picture-card"
                      :limit="1"
                      :on-success="handleVideoSuccess"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                </el-col>
              </el-row>

　　截图说明下：

 

 我这里是请求后台上传图片接口后会返回上传后的图片地址，整个界面的代码(这个是添加页面，里面用到了上传图片)

<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <div class="postInfo-container">
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="120px" label="发布人:" class="postInfo-container-item">
                    <el-input value="孝南区市场监督管理局" :maxlength="100" name="name" required  :disabled="true"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="120px" label="通知标题:" class="postInfo-container-item" prop="title">
                    <el-input  type="input" :rows="8" style="width: 800px" v-model="postForm.title"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="120px" label="封面图:" class="postInfo-container-item">
                    <el-upload
                      :action="uploadImgsAction()"
                      list-type="picture-card"
                      :limit="1"
                      :on-success="handleVideoSuccess"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label-width="120px" label="通知内容：" class="postInfo-container-item" prop="content">
                    <tinymce  style="width: 800px" v-model="postForm.content"/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="120px" label="" class="postInfo-container-item"  style="width:920px;">
                    <el-button type="primary" style='float:right;width:120px;' @click="sure">确认发布</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import {saveData } from '@/api/SupervisionNoticeList'
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/SingleImage3'
import {AddAnnouncement} from "@/api/supervisionNotice/supervisionNotice";
const defaultForm = {
  title:'',
  depa:[],
  content:''
}

export default {
  name: 'ArticleDetail',
  components: { Tinymce, Upload },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      postForm:{
        title: '',
        content: '',
        picture:''
      },
      loading: false,
      rules: {
        title: [{ required: true, message: '请填写标题', trigger: 'change' }],
        content: [{ required: true, message: '请填写内容', trigger: 'change' }]
      },

      temp: {},
 
      values: [],  // 存储value的数组
      labels: []   // 存储label的数组
    }
  },
  created() {
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      console.log("111",file)
    },
    handlePictureCardPreview(file) {
      console.log("222",file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;

    },
    //上传请求地址
    uploadImgsAction () {
      return process.env.VUE_APP_BASE_API + "/uploadImg"
    },
    //上传成功回调
    handleVideoSuccess(res, file, fileList) {

       console.log("res",res)

      this.postForm.picture = process.env.VUE_APP_BASE_API + res.data;
    },
    //提交方法
    sure() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
         // console.log("1122",this.videoList)
         // this.postForm.pathUrl=this.picUrls.toString() //值赋值给form表单中的pathUrl
          //this.postForm.pathUrl2=this.picUrls2.toString() //值赋值给form表单中的pathUrl
         // this.postForm.videoUrl=this.videoList.toString() //值赋值给form表单中的pathUrl
          /*  const moment = require('moment')
            this.postForm.eventTime = moment(this.postForm.eventTime).format('YYYY-MM-DD HH:mm:ss')*/
          console.log("form值",this.postForm)
          AddAnnouncement(this.postForm).then(res => {
            this.$message({
              message: '添加成功！',
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push({ path: '/supervisionnotice/supervisionnoticelist' })
            }, 1500)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

/*    selectBox(val){
	    this.values = [];
      val.forEach(item=>{
        const value = item.split(':')[0];
        this.values.push(value);
        this.postForm.noticeDept=this.values.toString();
      });
	  },*/
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .createPost-container {
    position: relative;
    padding-bottom: 20px;
    box-sizing: content-box;

    .createPost-main-container {
      padding: 20px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }

    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }

    .btn{
      margin-left: 40px;
    }
  }

  .article-textarea ::v-deep {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }
</style>

　　截图说明下：

 

 添加界面的代码结束了。若需要修改界面，还要展示之前上传的图片

    showAnnouncement(id) {
      this.listLoading = true
      // console.log(this.listQuery)
      GetAnnouncementById({
        id:id
      }).then(response => {
        console.log("clj",response)
        this.listLoading = false
        if(response.code == 200){

          this.postForm = response.data
          this.dialogVisible=true
          //this.dialogImageUrl =response.data.picture;

          var aa = response.data.picture
            var item = {
              name:'imagesName',
              url:aa
            }
            this.fileList.push(item)
          }

      }).catch(function(reason) {
        // that.listLoading = false
        // that.list = null
        // console.log('catch:', reason);
      })
    },