vue项目实现图片上传功能

下面是实现Vue项目图片上传功能的完整攻略：

准备工作

在开始实现图片上传功能之前，我们需要先进行几项准备工作。首先，需要确定你使用的Vue版本是否支持vue-cli3，如果不支持，需要先安装一个支持vue-cli3的Vue版本。其次，需要安装一个Vue插件——vue-uploader，以便我们更方便地完成图片上传功能开发。

安装Vue-cli3

Vue-cli3是一个Vue官方提供的脚手架工具，它可以帮助我们快速构建Vue项目。要安装Vue-cli3，只需要在命令行窗口中输入以下命令：

npm install -g @vue/cli

安装vue-uploader

vue-uploader是一个Vue插件，支持图片上传功能。要安装vue-uploader，只需要在命令行窗口中输入以下命令：

npm install --save vue-uploader

安装完成后，我们需要在Vue项目中引入vue-uploader。在main.js中添加以下代码：

import uploader from 'vue-uploader';
Vue.use(uploader);

实现图片上传功能

在准备工作完成之后，我们就可以开始实现图片上传功能了。下面是实现图片上传功能的完整步骤：

1. 创建一个可以上传图片的组件。在该组件的template中添加以下代码：

<template>
  <div>
    <input type="file" v-el:file v-on:change="uploadFile"/>
    <img v-bind:src="imageUrl"/>
  </div>
</template>

在template中，我们添加了一个<input>标签，可以用于选择文件上传。当用户选择文件后，会触发uploadFile方法。同时，我们也添加了一个<img>标签，用于在上传完成后显示上传的图片。

1. 在组件的script中添加以下代码：

export default {
  data () {
    return {
      imageUrl: ''
    };
  },
  methods: {
    uploadFile () {
      let file = this.$els.file.files[0];
      let formData = new FormData();
      formData.append('file', file);

      this.$http.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.imageUrl = response.data.imageUrl;
      });
    }
  }
}

在组件的data中，我们定义了一个imageUrl变量，用于在上传成功后显示上传的图片。在methods中，我们定义了一个uploadFile方法，用于上传文件。在该方法中，我们使用$els来引用文件上传控件，然后创建一个FormData对象，并将选择的文件添加到其中。然后，使用Vue的$http成员向服务器端发送POST请求，上传图片。在成功上传后，服务器端返回一个带有imageUrl的JSON对象，我们只需要将imageUrl赋值给data中的imageUrl即可完成上传的图片的显示。

1. 最后，我们需要在服务器端实现图片上传的处理。这里使用Express的multer中间件来实现图片的上传。具体步骤如下：

const express = require('express');
const app = express();
const multer  = require('multer');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

app.post('/api/upload', upload.single('file'), function (req, res, next) {
  res.json({ imageUrl: '/uploads/' + req.file.filename });
});

在服务器端，我们创建一个Express应用，并使用multer进行文件上传的处理。在multer中，我们定义了文件上传路径和文件名，这里将文件上传到uploads目录中，并使用当前时间戳作为文件名的一部分。然后，我们对外暴露了一个upload接口，用于处理上传图片的POST请求。在请求处理中，我们将上传成功后图片的URL返回给客户端。

至此，一个简单的图片上传功能就实现了，我们可以在Vue项目中使用该功能来上传图片。

示例1

<template>
  <div>
    <input type="file" v-el:file v-on:change="uploadFile"/>
    <img v-bind:src="imageUrl"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: ''
    };
  },
  methods: {
    uploadFile () {
      let file = this.$els.file.files[0];
      let formData = new FormData();
      formData.append('file', file);

      this.$http.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.imageUrl = response.data.imageUrl;
      });
    }
  }
}
</script>

示例2

<template>
  <div>
    <input type="file" v-el:file v-on:change="uploadFile"/>
    <div v-if="progress != 0">{{ progress }}%</div>
    <img v-bind:src="imageUrl"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: '',
      progress: 0
    };
  },
  methods: {
    uploadFile () {
      let file = this.$els.file.files[0];
      let formData = new FormData();
      formData.append('file', file);

      this.$http.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (event) => {
          this.progress = Math.round(event.loaded / event.total * 100);
        }
      }).then(response => {
        this.imageUrl = response.data.imageUrl;
      });
    }
  }
}
</script>

在示例1中，我们简单地展示上传的图片，没有显示上传的进度。在示例2中，我们使用了Vue的$http成员的第三个参数，使用onUploadProgress回调函数可以获取上传进度。我们在回调函数中将进度显示在组件的模板中。