前端图片上传与回显

最新推荐文章于 2025-03-28 14:52:56 发布

云中火花

最新推荐文章于 2025-03-28 14:52:56 发布

阅读量2.9k

点赞数

文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_48175704/article/details/115919044

版权

该博客探讨了在前端使用Vue.js进行图片上传和回显的实现方法。通过iview的upload组件进行图片上传，并介绍了如何处理大文件上传。在图片回显方面，提到了两种方式：将后端返回的二进制流文件转化为base64显示，或者使用URL.createObjectURL生成的URL来展示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片上传与回显

图片上传

此处使用的是iview的upload

<Upload
  ref="upload"
  multiple
  :format="['jpg','png','pdf']"
  type="drag"
  action="/"
  :max-size="20480"
  :show-upload-list="true"
  :on-exceeded-size="handleMaxSize"
  :before-upload="handleBeforeUpload"
>
  <div class="file-upload">
    <div>
      <Icon type="ios-cloud-upload" size="52" style="color:#C4C7CF"></Icon>
      <p>点击或将文件拖拽到这里上传</p>
      <p class="text">仅支持.jpg .png .pdf文件格式</p>
    </div>
  </div>
</Upload>

此处是上传限制大小，大文件可利用blob对象实现大文件分片上传。

// 上传
handleBeforeUpload(file) {
  var size = file.size / 1024// KB
  if (size > 20480) {
    this.handleMaxSize(file)
    return false
  }
  this.getUpload(file, 1)
  return false
},
getUpload(file) {
  // 展示上传图片（显示的是本地图片）
  this.file = file
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
  	// 此处的_base64可以放到img标签中进行展示
  	const _base64 = reader.result
  }
  // 接下来可以使用后端的接口上传图片
  // 上传
  const formData = new FormData()
  formData.set('files', file)
  formData.set('参数1', 'aaa')
  formData.set('参数2', 'bbb')
  toUpload(formData).then(res => {
    if(res.data.code === '200') {
      // 此处return false是阻止upload组件的默认上传事件 就是组件的那个action
      return false
    } else {
      this.$Message.error(res.data.message)
   }
  })
}

图片回显

后端接口返回的是二进制流文件

1.可以将二进制流文件转换成base64然后放到img中进行展示

preview() {
  preview({ key1：'value' }).then(res => {
    const blob = new Blob([res.data], { type: 'image/png' })
    const Fr = new FileReader()
    Fr.readAsDataURL(blob)
    Fr.onload = (event) => {
      this.isUpload = true
      // 这个就是转换为的base64图片地址
  	  const _base64 = reader.result
    }
  })

2.URL.createObjectURL生成的图片的URL

preview() {
  preview({ key1：'value' }).then(res => {
    this.src = window.URL.createObjectURL(res.data)
    this.isUpload = true
    this.logoPreview.push(this.src)
  })

效果图：