element上传图片

一 dom结构
<el-form-item label="相册图片" prop="picUrl" ref="uploadImg">

        <div class="tupian">

          <img :src="esAdvertisingForm.picUrl" alt="" width="150px" height="150px">

          <span class="cancelImg" v-if="showpicUrl" @click="deleteImg($event,esAdvertisingForm.picUrl)">X</span>

        </div>

        <el-upload

          class="upload-demo el-right"

          :action="scriptUpload"

          :show-file-list=false

          :headers="setHeader"

          name="file"

          :on-success="filterScriptSuccess"

          list-type="picture-card">

          <el-button size="small" type="primary">

            图片上传

          </el-button>

        </el-upload>

      </el-form-item>

2.配置地址，传session

computed: {

      scriptUpload () {

        return "/galaxy-front/adv/picture/upload";

      },

      setHeader () {

        return {

          Session: sessionStorage.getItem('session_id'),

          enctype: "multipart/form-data"

        }

      },

    },

3.图片内容显示到对应的框中

      filterScriptSuccess (res, file, list) {

        if (res.data) {

          this.esAdvertisingForm.picUrl = res.data;

          this.showpicUrl=true;

          this.$refs.uploadImg.clearValidate()

        }

      },