Package Exports

vue-ele-form-image-uploader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-ele-form-image-uploader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-ele-form-image-uploader | vue-ele-form 的图片上传扩展组件

介绍

vue-ele-form-image-uploader 做为 vue-ele-form 的第三方扩展, 通过对 vue-ele-upload-image 的封装, 大大增强的上传图片的功能, 包括 单张图片模式/多张图片模式/拖拽上传/裁剪上传 的特性

安装

npm install vue-ele-form-image-uploader --save

使用

import EleForm from 'vue-ele-form'
import EleFormImageUploader from 'vue-ele-form-image-uploader'
// 注册 ele-form
Vue.use(EleForm, {
  // 可以在这里设置全局的 image-uploader 属性
  'image-uploader': {
    action: 'https://jsonplaceholder.typicode.com/posts' // 上传地址
  }
})

// 注册 image-uploader 组件
Vue.component('image-uploader', EleFormImageUploader)

formDesc: {
  xxx: {
    label: 'xxx',
    type: 'image-uploader', // 只需要在这里指定为 image-uploader 即可
    // 属性参考: https://github.com/dream2023/vue-ele-upload-image
    attrs: {
      action: 'https://jsonplaceholder.typicode.com/posts', // 上传地址
      data: {token: 'xxx'}, // 附带数据
      // 上传后对响应处理, 拼接为一个图片的地址
      handleResponse(response, file, fileList) {
        // 根据响应结果, 设置 URL
        return 'https://xxx.xxx.com/image/' + response.id
      }
    }
  }
}