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插件，具有用于选择图片的简单组件。 它支持将图片上传到后端的简单实现。

安装 (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 插件 组件