vue获取本地图片展示到页面上方法

<td style="padding: 50px 0;">

                <Upload ref="upload" :show-upload-list="false" :before-upload="uploadImg" multiple type="drag"

                  accept=".jpg, .jpeg, .png, .bmp" action="/chenfan_api/file/upload"

                  style="display: inline-block; 100px;" v-if="!imgUrlSrc&&(pageType==='new'||pageType==='edit')">

                  <div style=" 100px;height: 100px;line-height: 100px;">

                    <Icon type="ios-camera" size="20"></Icon><span class="picName">款式图</span>

                  </div>

                </Upload>

                <div class="demo-upload-list" v-if="imgUrlSrc">

                  <img :src="imgUrlSrc">

                  <div class="demo-upload-list-cover" v-if="pageType==='new'||pageType==='edit'">

                    <Icon type="ios-trash-outline" @click.native="removeImg()"></Icon>

                  </div>

                </div>

              </td>

 

uploadImg(file) {

        let formData = new FormData()

        formData.append('file', file)

        this.$axios({

          url: '/chenfan_api/file/upload',

          method: 'post',

          data: formData

        }).then((data) => {

          if (data.code === 200) {

            this.data.sampleCheckPrice.imgUrl = data.obj[0].id

            getImgBlobSrc(data.obj[0].id).then(src => this.imgUrlSrc = src)

          }

        })

        return false

      },

 

 

 

// 获取图片src

export const getImgBlobSrc = (id) => {

  return new Promise((resolve, reject) => {

    if (id) {

      axios({

        url: `/chenfan_api/file/view/${id}`,

        method: 'get',

        responseType: 'blob'

      }).then((data) => {

        let blob = data

        let src = window.URL.createObjectURL(blob)

        resolve(src)

      })

    } else {

      resolve('')

    }

  })

}

 

删除

 removeImg() {

        this.data.sampleCheckPrice.imgUrl = ''

        this.imgUrlSrc = ''

      },