vue 插件 组件_Vue插件，具有用于选择图像的简单组件

vue 插件 组件

Vue图像选择器 (vue-image-chooser)

This is vue plugin with simple component for choosing image. It supports easy implementation for image upload to the backend.

这是vue插件，具有用于选择图片的简单组件。 它支持将图片上传到后端的简单实现。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

npm i vue-image-chooser --save

Registring plugin:

注册插件：

import VueImageChooser from 'vue-image-chooser'

Vue.use(VueImageChooser)

This will make vue-image-chooser component globaly available. Bellow is example how to use it with axios library

这将使vue-image-chooser组件全局可用。 贝娄是如何与axios库一起使用的示例

<div class="MyContent">
  <h1>Click on chooser to choose image</h1>
  <div style="width:400px;margin: 0 auto">
    <vue-image-chooser name="image-chooser" @change="uploadFile" :progress="progress" :error="error"/>
  </div>
</div>

export default {
  data() {
    return {
      progress: null,
      error: null,
    }
  },
  methods: {
    uploadFile(file) {
      this.progres = 0;
      let formData = new FormData();
      formData.append('image', file);
      var config = {
        onUploadProgress: progressEvent => {
          var percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          this.progress = percentCompleted
        }
      }
      try {
        const { data } = await axios.post(
          '/api/route/to/upload/image',
          formData,
          config
        )
      } catch (e) {
        this.error = 'Error has occured'
      }
    }
  }
}

用法 (Usage)

The component takes four props:

该组件具有四个道具：

• name (String): Required prop, must be unique (you can consider it like id)

  name (字符串)：必需的道具，必须唯一(您可以像id一样考虑)

• progress (Number): Number between 0-100. If it is null or 100 component consider uploading process finished.

  progress (Number)：介于0-100到0-100之间的数字。 如果为null或100组件，请考虑完成上传过程。

• error (String): Error message in case that server responded with error

  error (字符串)：如果服务器响应错误，则会显示错误消息

• height (String): Default is 350px

  height (字符串)：默认为350px

The component emits change event with single file as data, when it recieve an image, after it can be uploaded as described above)

组件收到图像后，会如上所述将其上传，并以单个文件作为数据发出change事件。

翻译自: https://vuejsexamples.com/vue-plugin-with-simple-component-for-choosing-image/

vue 插件 组件