vue图片上传并转化base64格式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue图片上传并转化base64格式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

组建中有一个@change="xxx"方法,图片上传时会调用这个方法，在这个方法中可以拿到上传图片的一些数据，可以对图片数据进行处理

<a-upload-dragger :file-list="fileList" :remove="handleRemove" @change="handleChange"  >
  <p style="font-size:36px;margin-bottom:8px;">
    <a-icon :component="inBox" />
  </p>
  <div>
    <p class="ant-upload-hint" style="font-size:16px;color: rgba(0, 0, 0, 0.85)">点击或将文件拖拽到这里上传       </p>
    <p>一次只能上传一个文件</p>
  </div>
</a-upload-dragger>

handleChange ({ file, fileList, event }) {
   // 组件自己会多次调用这个方法，如果还加载中调用时，直接return
  if (file.status === 'uploading') {
    this.loading = true
    return
  }
  this.loading = true
  const reader = new FileReader()
  if (file?.originFileObj) {
    reader.readAsDataURL(file.originFileObj)
  } else {
     reader.readAsDataURL(file)
   }
   reader.addEventListener('load', () => {
    this.logUrl = reader.result
    const formData = new FormData()
    const data = this.logUrl.split('base64,')[1]
    formData.append('base64', data)
    formData.append('type', file.type.split('/')[1])
    axios({
      url: 'http://122.162.81.114:8080/upload-file-base64',
      method: 'post',
      data: formData
    }).then(res => {
      this.loading = false
      this.selectList = res.data
      this.listFor = Object.keys(res.data)
    })
  })

转化base64格式

const reader = new FileReader()
  // 因为这两个组件的fils文件不一样所有一个判断
  if (file?.originFileObj) {
    reader.readAsDataURL(file.originFileObj)
  } else {
    reader.readAsDataURL(file)
  }
  reader.addEventListener('load', () => {
    this.base64 = reader.result
  })