如何在 Vue.js (Element.ui) 中的上传按钮侧面上传后预览/显示图像？

Posted 2023-02-22

【中文标题】如何在 Vue.js (Element.ui) 中的上传按钮侧面上传后预览/显示图像？

【英文标题】：How to preview/display an image after uploading at the side of the upload button in Vue.js (Element.ui)?

【发布时间】：2021-01-18 14:51:40

【问题描述】：

我正在上传图片后显示/预览图片。我正在尝试上传图片，然后进行 axios/AJAX 调用。

请在下面找到代码：

html 代码：

        <span>User Name</span>
           <input v-model="person_name" placeholder="Edit Me">
           <br>
           
        <!--Uploading pic -->
        <span>Display Pic</span>
           <input type="file" name="file" />
           <br>

        <!-- I want to display this uploaded pic here, before submitting the form -->

        <!-- Skipping the code to submit (button code, etc) the form --> 
          

javascript 代码 --> API 的 AJAX/FETCH 调用

            var formData = new FormData();
            var fileField = document.querySelector("input[type='file']");

            formData.append('username', this.person_name);
            
            formData.append('File', fileField.files[0]); // getting the file attached
            
            const body = formData;

            const init = 
                method: 'POST',
                body
            ;

            fetch('http://..xyz....com', init)
                .then((response) => 
                return response.json(); // or .text() or .blob() ...
            )
                .then((text) => 
                // text is the response body
            )
                .catch((e) => 
                // error in e.message
            );
        ,

上传图片后如何将图片/照片显示或预览为头像或其他内容。

【问题讨论】：

嗨@skate_23，在服务器上保存图像后，您可以将图像的路径发回并将其放在img标签中:)

谢谢。请您告诉我如何在上传图片后立即发回图片的路径？有点想从一段时间内弄清楚这一点。

【参考方案1】：

据我了解您的问题，您可以先预览上传的图片，然后再将其发送到服务器。您可以在input type='file' 上附加一个@change 事件侦听器来侦听更改事件，然后访问event.target.files[0] 上传的图像。然后把img标签的src换成上传的图片src。

Live Demo Here

您也可以通过preview()方法上传后立即发送到服务器，也可以使用upload按钮发送到服务器。

你的 Vue 模板：

<template>
  <div id="app">
    <img id="image" :src="imgSrc" />
    <input type=file @change="preview">
  <div>
    <button @click="upload()">Upload</button>
  </div>
  <div>  uploaded  </div>
  </div>
</template>

脚本：

data: () => (
  imgSrc: '',
  uploaded: ''
),

methods: 
  preview(e) 
    var pic = document.getElementById('image')
    let imgSrc = URL.createObjectURL(e.target.files[0]);
    this.imgSrc = imgSrc
  ,
  upload() 
    this.uploaded = this.imgSrc;