vue图片上传—vue图片上传显示

Vue是一种流行的JavaScript框架，它可以帮助开发人员快速构建交互式Web应用程序。Vue的一个主要特点是其组件化结构，它使开发人员可以将应用程序分解为小部件，每个小部件都可以独立开发和测试。我们将探讨如何使用Vue来实现图片上传和显示功能。

安装Vue.js

要使用Vue.js，您需要在项目中安装Vue.js。您可以使用npm或yarn安装Vue.js。在控制台中，输入以下命令即可安装Vue.js：

npm install vue

或者

yarn add vue

实现图片上传

要实现图片上传，我们需要使用Vue.js和一些其他库。我们将使用axios来处理HTTP请求，使用vue-dropzone来实现拖放上传。在Vue.js组件中导入这些库：

import axios from 'axios';
import vueDropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';

然后，在Vue.js组件中定义一个data对象，其中包含一个名为“file”的属性，该属性将保存用户选择的文件。我们还定义了一个名为“uploading”的属性，该属性用于显示上传进度：

data() {
  return {
    file: null,
    uploading: false
  }

接下来，我们定义一个方法，该方法将在用户选择文件时触发。该方法将用户选择的文件存储在“file”属性中：

methods: {
  onFileSelected(event) {
    this.file = event.target.files[0];
  }

我们定义一个方法，该方法将在用户单击“上传”按钮时触发。该方法将使用axios发送HTTP POST请求，将文件上传到服务器。在上传期间，我们将设置“uploading”属性为true，以显示上传进度：

methods: {
  onUpload() {
    this.uploading = true;
    let formData = new FormData();
    formData.append('file', this.file);
    axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      onUploadProgress: progressEvent => {
        this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      }
    }).then(() => {
      this.uploading = false;
      this.file = null;
      alert('Upload success!');
    }).catch(() => {
      this.uploading = false;
      alert('Upload failed!');
    });
  }

实现图片显示

要实现图片显示，我们需要使用Vue.js和一些其他库。我们将使用vue-gallery来显示图片。在Vue.js组件中导入这些库：

import vueGallery from 'vue-gallery';

然后，在Vue.js组件中定义一个data对象，其中包含一个名为“images”的属性，该属性将保存从服务器加载的图像：

data() {
  return {
    images: []
  }

接下来，我们定义一个方法，该方法将在组件加载时触发。该方法将使用axios发送HTTP GET请求，从服务器加载图像列表：

created() {
  axios.get('/api/images').then(response => {
    this.images = response.data;
  });

我们在Vue.js组件中添加vue-gallery组件，以显示图像：

我们展示了如何使用Vue.js实现图片上传和显示功能。我们使用了vue-dropzone和axios库来处理文件上传，使用vue-gallery库来显示图像。通过学习，您应该能够使用Vue.js轻松实现类似的功能。