Vue具有实时预览功能的照片上传器– vue-image-chooser

Vue具有实时预览功能的照片上传器– vue-image-chooser
插件名称 vue-image-chooser
发布时间 2021年5月11日
插件作者 schumskie

image-chooser是Vue.js组件,旨在提供一种将图像上传到Web服务器的简单方法。

安装和下载:

# NPM
$ npm i vue-image-chooser

使用

1.导入并注册组件。

import VueImageChooser from 'vue-image-chooser'
Vue.use(VueImageChooser);

2.将<vue-image-chooser />组件添加到应用程序。

<vue-image-chooser 
  name="image-chooser" 
  @change="uploadFile" 
  :progress="progress" 
  :error="error"
/>
export default {
  data() {
    return {
      progress: null,
      error: null,
    }
  },
  methods: {
    uploadFile(file) {
      this.progress = 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(
          '/path/to/server/',
          formData,
          config
        )
      } catch (e) {
        this.error = 'Error has occured'
      }
    }
  }
}

3.可用道具。

name: {
  required: true,
  type: String
},
baseSrc: {
  type: String,
  default: ""
},
height: {
  type: String,
  default: "350px"
},
displayName: {
  type: String,
  default: "Add Photo"
},
error: {
  default: null,
  validator: function(value) {
    return (
      value === null || Array.isArray(value) || typeof value === "string"
    );
  }
},
progress: {
  type: Number,
  default: null
}