使用 bootstrap 轮播或任何轮播上传前的 VUEJS 预览图片

Question

所以我想在使用 bootstrap carousel 或 vuejs 中的任何 carousel 上传图片之前预览图片， 但我无法做到这一点，如果有人有想法请与我分享。 谢谢

Answer 1

为了显示图像，您可以在图像完全上传到服务器后将 url 给 src，或者如果您想在发送到服务器之前显示图像，您必须将文件编码为 base64 格式，例如这在 data

中定义了 base64 变量

onChangeFileUpload ($event) {
  this.file = $event.files[0]
  this.encodeImage(this.file)
},
encodeImage (input) {
  if (input) {
    const reader = new FileReader()
    reader.onload = (e) => {
      this.base64Img = e.target.result
    }
    reader.readAsDataURL(input)
  }
}

然后您可以检查文件是否已上传您应该直接从 url 查看图像，否则在 base64