如何将 File 对象呈现为 HTML 元素（使用 Vue.js）答案

【问题标题】：How to render File object to HTML element (using Vue.js)如何将 File 对象呈现为 HTML 元素（使用 Vue.js）
【发布时间】：2018-06-01 20:26:20
【问题描述】：

我在渲染 HTML 元素中的图像时遇到了一些问题。我认为对于有经验的前端开发人员来说，解决方案可能很简单。我有一个 Vuetify 组件，可以让用户输入个人资料图片：

<v-form>
   <v-avatar size="144">
       <v-icon hidden ref="default_icon" size="144">account_circle</v-icon>
       <img ref="my_img" style="display: none;" :src="my_photo.name">
       <v-btn @click="$refs.my_input.click()" class="img_btn" absolute right small fab dark color="pink">
           <v-icon dark>add</v-icon>
       </v-btn>
       <input ref="my_input" hidden type="file" accept="image/*" @change="onFileChange($refs.my_input)">
   </v-avatar>
</v-form>

当元素调用 onFileChange 时，它会将 HTML 元素传递给函数。

onFileChange(event) {
    this.my_photo = event.files[0]
    console.log(this.my_photo)
    this.$refs.default_icon.style.display = "none"
    this.$refs.my_img.style.display = "inline"
}

所以现在该函数将图标替换为 img 标签。我想用用户输入的图像填充图像标签。 this.my_photo 是一个文件类型变量。有谁知道如何做到这一点？向大家致敬！

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

my_photo.name 实际上只是上传图像的名称。您需要将上传的图片转换为图片src的有效格式。

您可以使用FileReader.readAsDataURL() 或URL.createObjectURL() 以多种方式执行此操作。这些创建图像标签可以使用的源表示。

请记住，如果您计划将此图像上传到服务器，则需要保留对 event.target.files[0] 的引用。

这里是使用URL.createObjectURL() 的示例。

new Vue({
  el: "#app",
  data: {
    my_photo: '',
  },
  methods: {
    onFileInput(event) {    	   
      const data = URL.createObjectURL(event.target.files[0]);
      this.my_photo = data;
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <input type="file" @change="onFileInput($event)">
  <img :src="my_photo" alt="">
</div>

【讨论】：

谢谢！这正是我想要的。我真的很感激。