vue本地上传多图片读取文件内容转换为base64位格式，并且能够预览

最新推荐文章于 2025-05-29 15:46:28 发布

一键写代码

最新推荐文章于 2025-05-29 15:46:28 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 前端技术积累

本文链接：https://blog.csdn.net/qq_42991509/article/details/102799894

前端技术积累同时被 2 个专栏收录

160 篇文章

订阅专栏

vue

89 篇文章

订阅专栏

本文介绍了一种前端实现图片上传的方法，包括将图片转换为Base64格式字符串、判断文件类型和大小、以及实现本地预览。通过自定义上传按钮样式，使用Vue.js进行文件读取和处理，限制上传图片数量和大小，确保上传图片的有效性和用户体验。

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

需求：前端在用户选择本地图片后，转换位base64位格式字符串，传递给后台，并且需要判断文件类型和文件大小，以及实现本地预览。
实践：

<div class="uploadImgBtn">
     <span class="uploadImgBtnText">选择图片</span>
     <input ref="fileBtn" class="file-btn" type="file" multiple accept="image/jpg,image/jpeg,image/png" @change="uploadImg" />
</div>
     <img v-for="(item,index) in imgSrcs" :key="index" :src="item" class="upload-img" />

默认的上传文件样式很丑，需要自己写一个包裹元素，覆盖默认样式。我这里是多图片上传。multiple属性表示多文件上传。单文件上传去掉该属性，下面的读取的文件列表只需要拿第一个files[0]就可以拿到单文件。

  .uploadImgBtn {
    width: 80px;
    height: 28px;
    display: inline-block;
    position: relative;
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    text-align: center;
    cursor: pointer;
    .uploadImgBtnText {
      position: absolute;
      left: 15px;
      top: 12px;
      line-height: 0;
      cursor: pointer;
    }
    .file-btn {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  &:hover {
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
  }

methods中定义的方法：

async uploadImg() {
      try {
        var that = this
        that.imgSrcs = [] // 上传文件前清空。
        // const inputFile = await this.$refs.fileBtn.files[0]
        const inputFiles = await this.$refs.fileBtn.files
        // console.log(this.$refs.fileBtn.files)
        if (this.$refs.fileBtn.files.length > 3) {
          this.$message({
            message: '最多只能上传3张图片',
            type: 'warning'
          })
          console.log('最多只能上传3张图片')
          return false
        }
        let fileList = []
        fileList = fileList.concat(Array.from(inputFiles)) // 将选择的文件列表对象变成数组
        // console.log(fileList)
        let typeflag = false // 检测文件类型
        let sizeFlag = false // 检测文件大小
        const fileMaxSize = 2 * 1024 * 1000 // 2M
        fileList.forEach(v => {
          if (v.type !== 'image/jpeg' && v.type !== 'image/png' && v.type !== 'image/jpg') {
            typeflag = true
          }
          if (v.size > fileMaxSize) {
            sizeFlag = true
          }
        })
        if (typeflag) {
          this.$message({
            message: '不是有效的图片文件',
            type: 'warning'
          })
          // console.log('不是有效的图片文件！')
          return false
        }
        if (sizeFlag) {
          this.$message({
            message: '文件大小不能超过2M',
            type: 'warning'
          })
          // console.log('不是有效的图片文件！')
          return false
        }
        // console.log('选了图片')
        fileList.map(async v => {
          const res = await this.reviewFile(v)
          that.imgSrcs.push(res)
        })
      // console.log(that.imgSrcs)
      } catch (error) {
        console.log(error)
      }
    }