Image Uploader 图片上传

表单类型组件，结合form组件使用

示例

<wx-form ref="form">
  <wx-form-header>图片上传</wx-form-header>
  <wx-form-body>
    <wx-form-group title="上传图片">
      <wx-image-uploader :url="url" @before-send="uploadBeforeSend" @success="uploadSuccess" @error="uploadError" @delete="uploadDelete"></wx-image-uploader>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      url: "/fileagent/uploadForServer"
    };
  },
  methods: {
    uploadBeforeSend (data, headers) {
      Object.assign(data, {'group': 'image'})
      Object.assign(headers, {'x-token': 'token-XcF'})
    },
    uploadSuccess(res) {
      this.$toast("上传成功");
    },
    uploadError(err) {
      this.$toast(err.message, { width: "180px" });
    },
    uploadDelete(fileId, target, gallery) {
      target.remove();
      gallery.hide();
    }
  }
};
</script>

可上传图片类型限制

支持image/jpg, image/jpeg, image/png, image/gif

Image Uploader Attributes

参数	说明	类型	可选值	默认值
url	上传地址	String	-	-
maxUploadSize	最大可上传字节	Number	-	10 * 1024 * 1024（10mb）
maxUploadCount	最多可上传数量	Number	>=1	10

Image Uploader Events

事件名称	说明	回调参数
queued	文件添加成功时触发	file：文件信息
beforeSend	开始上传前触发	data：上传数据，扩展此对象来控制上传参数 headers: 上传头部信息，扩展此对象来控制上传头部
progress	上传时触发	percent：上传进度
success	上传成功时触发	ret：上传接口返回对象
error	上传失败时触发	err：上传错误对象
delete	删除图片时触发	fileId：图片索引值 target：图片 HtmlElement gallery：图片预览器

上传接口响应数据格式

上传接口响应数据格式必须为字符串或json格式

上传错误对象

{message: '', err: Object}

图片上传