如何将文件对象渲染为HTML元素(使用Vue.js)
如何将文件对象渲染为HTML元素(使用Vue.js)
提问于 2018-06-02 04:26:21
我在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标记替换了图标。我想用用户输入的图像填充image标记。this.my_photo是一个文件类型变量。有人知道怎么做吗？向大家致以问候！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-02 06:32:23
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50650586
复制相关文章
相似问题
腾讯云开发者
