zoukankan      html  css  js  c++  java
  • 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 = ''
          },
  • 相关阅读:
    FOC中的Clarke变换和Park变换详解(动图+推导+仿真+附件代码)
    有感FOC算法学习与实现总结
    永磁同步电机 spmsm 和 ipmsm 的区别总结
    Jekyll 解决Jekyll server本地预览文章not found的问题
    STM32 TIM 多通道互补PWM波形输出配置快速入门
    STM32 TIM1高级定时器配置快速入门
    STM32 ADC多通道规则采样和注入采样
    STM32 时钟树配置快速入门
    STM32 TIM 编码器模式采集编码器信号
    STM32 标准库V3.5启动文件startup_stm32f10xxx.s分析
  • 原文地址:https://www.cnblogs.com/wssdx/p/11806742.html
Copyright © 2011-2022 走看看