使用 vue-picture-input 在 Vue.js 应用程序中上传图片

文件和图像上传是许多非平凡应用程序的必备功能. 幸运的是,我们很容易在Vue应用程序中设置 vue-picture-input

<$>[注意] 检查 这个帖子我们的如果你想创建自己的自定义文件选择器输入。

安装

通过 npm 或 Yarn安装 vue-picture-input:

1$ npm install --save vue-picture-input
2
3# or:
4$ yarn add vue-picture-input

使用

图书馆 vue-picture-input允许各种用途,并且非常简单:

1<template>
2  <picture-input
3
4  <!--Props go here-->
5
6  ></picture-input>
7</template>

以下是我们将使用的几个优惠:

  • ref:我们将需要这个来访问 base64 图像字符串
  • 宽度,高度: 命令组件的宽度和高度
  • 接受: 用于限制被接受的文件类型
  • 可移除: 指定是否可以重置组件

此外,组件会发出以下事件:

  • 删除:当图像从组件 中分离时发射* 更改:当选择的图像被更改时发射(即重新选择)

以下是我们对文件输入的代码的看法:

 1[label index.vue]
 2<picture-input
 3  ref="pictureInput"
 4  @change="onChanged"
 5  @remove="onRemoved"
 6  :width="500"
 7  :removable="true"
 8  removeButtonClass="ui red button"
 9  :height="500"
10  accept="image/jpeg, image/png, image/gif"
11  buttonClass="ui button primary"
12  :customStrings="{
13  upload: '<h1>Upload it!</h1>',
14  drag: 'Drag and drop your image here'}">
15
16</picture-input>

让我们添加一个按钮,允许我们将选择的图像上传到我们的后端。

它基本上在点击时呼叫试图上传方法,并具有禁用类绑定,如果有一个选定的图像,它只会被启用:

1<button @click="attemptUpload" v-bind:class="{ disabled: !image }">
2  Upload
3</button>

接下来,我们将使用 Axios来创建网络请求,我们还将利用 Formdata API来创建发布图像数据的甜蜜构成:

 1[label upload.js]
 2import axios from 'axios';
 3
 4export default function (url, file, name = 'avatar') {
 5  if (typeof url !== 'string') {
 6    throw new TypeError(`Expected a string, got ${typeof url}`);
 7  }
 8
 9  // You can add checks to ensure the url is valid, if you wish
10
11  const formData = new FormData();
12  formData.append(name, file);
13  const config = {
14    headers: {
15      'content-type': 'multipart/form-data'
16    }
17  };
18  return axios.post(url, formData, config);
19};

上面的代码接受一个 url 作为第一个参数,一个文件对象作为第二个参数,然后返回一个承诺. 它还将标题的内容类型设置为 multipart/formdata,因此我们的后端 API 可以告诉你管道中的内容。

因此,我们可以使用上述代码:

 1import FormDataPost from '/upload';
 2
 3//...
 4
 5FormDataPost('http://localhost:8001/user/picture', image)
 6  .then(response=>{
 7    console.log("Uploaded picture successfully");
 8  })
 9  .catch(err=>{
10    console.error(err);
11  });
12
13 //...

以下是我们 onChanged、 onRemoved 和 attemptUpload 方法的样子:

 1//...
 2
 3methods: {
 4  onChanged() {
 5    console.log("New picture loaded");
 6    if (this.$refs.pictureInput.file) {
 7      this.image = this.$refs.pictureInput.file;
 8    } else {
 9      console.log("Old browser. No support for Filereader API");
10    }
11  },
12  onRemoved() {
13    this.image = '';
14  },
15  attemptUpload() {
16    if (this.image){
17      FormDataPost('http://localhost:8001/user/picture', this.image)
18        .then(response=>{
19          if (response.data.success){
20            this.image = '';
21            console.log("Image uploaded successfully ✨");
22          }
23        })
24        .catch(err=>{
25          console.error(err);
26        });
27    }
28  }
29}
30
31//...

完成了! 我们的图片上传在前端上工作。 Read-on 了解如何使用 Express 在 Node.js 后端上设置此功能。

Published At
Categories with 技术
Tagged with
comments powered by Disqus