Question

MDN上有一个关于如何使用FileReader显示预览图像的示例：

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="root" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit account</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

    <script src="resources/jsScripts/addInput.js" language="Javascript" type="text/javascript"></script>
    <script src="resources/jsScripts/addInputWithValue.js" language="Javascript" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">

    $().ready(function () {
        $('#registration').validate({
            rules: {
                name: {
                    "required": true,
                    minlength: 2
                },
                surname: "required",
                password: {
                    required: true,
                    minlength: 3
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                name: "Please enter your firstname",
                surname: "Please enter your lastname",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 3 characters long"
                },
                email: "Please enter a valid email address"
            },
            submitHandler: function (form) { // for demo
                alert('valid form');
                return false;
            }
        });
    });
</script>

<%@ include file="search.jsp" %>
<div class="container-fluid jumbotron">

    <div class="form-group row-center">
        <form action="<c:url value="/account"/>" id="registration" name="registration" method="post"
        class="form-horizontal"
        enctype="multipart/form-data">

        <div class="form-group" align="right">
            <label for="name" class="col-sm-3 control-label">Имя</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="name" id="name"
                <c:if test="${not empty account.name}">
                    value=${account.name}
                </c:if>
                >
            </div>

        </div>

        <div class="form-group" align="right">
            <label for="surname" class="col-sm-3 control-label">Фамилия</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="surname" id="surname"
                <c:if test="${not empty account.surname}">
                    value=${account.surname}
                </c:if>
                >
            </div>
        </div>

        <div class="form-group" align="right">
            <label for="patronymic" class="col-sm-3 control-label">Отчество</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="patronymic" id="patronymic"
                <c:if test="${not empty account.patronymic}">
                    value=${account.patronymic}
                </c:if>
                >
            </div>
        </div>

        <div class="form-group" align="right">
            <label for="login" class="col-sm-3 control-label">Логин</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="login" id="login"
                <c:if test="${not empty account.login}">
                    value=${account.login}
                </c:if>>
            </div>
        </div>

        <div class="form-group">
            <label for="password" class="col-sm-3 control-label">Пароль</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" name="password" id="password"
                       placeholder="Введите новый пароль">
            </div>
        </div>

        <div class="form-group" align="right">
            <label for="phone" class="col-sm-3 control-label">Телефонный номер</label>
            <div class="col-sm-4">
                <input type="tel" class="form-control" id="phone" name="phones"
                <%--onchange="return validate(phones.value())"--%>
                onkeyup="alert('text some ext')"
                <c:if test="${not empty account.contactInfo}">
                    <c:if test="${not empty account.contactInfo.phones}">
                        value=${account.contactInfo.phones.get(0).number}
                    </c:if>
                </c:if>
                >

            </div>
            <div class="col-sm-1">
                <input class="btn btn-success btn-add form-control" type="button"
                       value="+"
                       onClick="addInput('dynamicInput');"
                >
            </div>
        </div>

        <div id="dynamicInput">
        </div>

        <c:if test="${not empty account.contactInfo.phones}">
            <c:forEach var="phone" items="${account.contactInfo.phones}" varStatus="loopCount">
                <c:if test="${loopCount.count > 1}">
                    <script>
                        addInputWithValue('dynamicInput', '${phone.number}');
                    </script>
                </c:if>
            </c:forEach>
        </c:if>

        <div class="form-group" align="right">
            <label for="email" class="col-sm-3 control-label">email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" name="email" id="email"
                <c:if test="${not empty account.contactInfo}"> value=${account.contactInfo.email}</c:if>
                >
            </div>
        </div>

        </form>
    </div>
</div>
</body>
</html>

我想知道如何在Vue组件中使用它。在我看来，异步部分并不容易处理，但我是Vue的新手，也许这是一个高级功能。

Answer 1

在其<img :src="src" id="img>对象中创建一个src标记和data属性的组件。如果你想创建一个库并且它是一个img id，你可以从父组件传递一个idx prop和一个文件，因为当我们通过id引用一个图像时，我们需要每个img元素的唯一id。

创建方法loadPicture

loadPicture(file) {
   let self = this;
   let img = document.getElementById('img');
   var reader = new FileReader();
   reader.onload = function(e) {
     self.src = e.target.result;
   }
   reader.readAsDataURL(file);
}`

然后在mounted生命周期

中调用此方法

mounted() {
     this.loadPicture();
}

工作示例：https://jsfiddle.net/8dnhh23o/
多个图片示例：https://jsfiddle.net/o1037uks/

如何将FileReader图像预览示例转换为Vue组件？

1 个答案: