vue移动端上传组件_一个简单的vue组件，用于通过调整大小来上传客户端图像

vue移动端上传组件

Vue图像上传和调整大小 (Vue Image Upload and Resize)

A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate.

一个Vue.js插件组件，用于客户端图像上传，具有可选的调整大小和基于exif的自动旋转功能。

This plugin was created for the use in a webapp scenario where we had a large number of end users uploading camera photos from their mobile devices on partly low end data plans. The primary purpose is therefor client-side resizing and if needed exif-based auto-rotation. It can however also be use simply as a file upload component.

此插件是为在Webapp场景中使用而创建的，在该场景中，我们有大量最终用户使用部分低端数据计划从其移动设备上载相机照片。 这样做的主要目的是客户端调整大小，以及在需要时基于exif的自动旋转。 但是，它也可以简单地用作文件上传组件。

Based on [ImageUploader] (https://github.com/rossturner/HTML5-ImageUploader) by Ross Turner. The plugin makes use of two optional dependencies: Exif.js (for autorotate) and JavaScript Canvas to Blob (for blob output).

基于Ross Turner的[ImageUploader]( https://github.com/rossturner/HTML5-ImageUploader )。 该插件利用了两个可选的依赖项：Exif.js(用于自动旋转)和JavaScript Canvas到Blob(用于blob输出)。

View demo 查看演示 Download Source 下载源

安装 (Installation)

纱 (yarn)

yarn add vue-image-upload-resize

npm (npm)

npm install --save vue-image-upload-resize

用法 (Usage)

In script entry point

在脚本入口点

import ImageUploader from 'vue-image-upload-resize'
Vue.use(ImageUploader);

作为全局脚本 (As global script)

<script src="https://unpkg.com/vue-image-upload-resize"></script>

The global script automatically registers as a global componenet. See public/demo.html for example use.

全局脚本会自动注册为全局组件。 有关示例用法，请参见public / demo.html 。

标记 (Markup)

<template>
  <image-uploader
    :debug="1"
    :maxWidth="512"
    :quality="0.7"
    :autoRotate=true
    outputFormat="verbose"
    :preview=false
    :className="['fileinput', { 'fileinput--loaded' : hasImage }]"
    capture="environment"
    accept="video/*,image/*"
    doNotResize="['gif', 'svg']"
    @input="setImage"
    @onUpload="startImageResize"
    @onComplete="endImageResize"
  ></image-uploader>
</template>

输入标签槽 (Input label slot)

An optional label tag can be added as a slot

可以将可选标签标签添加为插槽

例 (Example)

<image-uploader ... >
      <label for="fileInput" slot="upload-label">
        <figure>
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
              <path class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path>
          </svg>
        </figure>
        <span class="upload-caption">{{ hasImage ? 'Replace' : 'Upload' }}</span>
      </label>
  </image-uploader>

设定值 (Settings)

道具 (Props)

ID (id)

The ID for the file input, required if more than one instance should be used on the same page.

如果在同一页面上使用多个实例，则需要输入文件的ID。

• default fileInput

  默认文件输入

• type String

  类型字符串

maxWidth (maxWidth)

An integer in pixels for the maximum width allowed for uploaded images, selected images with a greater width than this value will be scaled down before upload.

以像素为单位的整数表示已上传图像所允许的最大宽度，所选宽度大于此值的图像将在上传之前按比例缩小。

• type: Number

  类型：数字

• default: 1024

  默认值：1024

最大高度 (maxHeight)

An integer in pixels for the maximum height allowed for uploaded images, selected images with a greater height than this value will be scaled down before upload.

以像素为单位的整数，表示上传的图像允许的最大高度，在此之前，选定的高度大于此值的图像将按比例缩小。

• type: Number,

  类型：数字，

• default: 1024

  默认值：1024

maxSize (maxSize)

NB Is broken, see https://github.com/rossturner/HTML5-ImageUploader/issues/13. A float value in megapixels (MP) for the maximum overall size of the image allowed for uploaded images, selected images with a greater size than this value will be scaled down before upload. If the value is null or is not specified, then maximum size restriction is not applied

注意事项已损坏，请参阅https://github.com/rossturner/HTML5-ImageUploader/issues/13 。 上载图像所允许的图像最大最大尺寸的浮点值(以百万像素(MP)为单位)，选定尺寸大于此值的图像将在上载之前按比例缩小。 如果该值为null或未指定，则不应用最大大小限制

• type: Number,

  类型：数字，

• default: null

  默认值：null

质量 (quality)

A float between 0 and 1.00 for the image quality to use in the resulting image data, around 0.9 is recommended.

对于要在生成的图像数据中使用的图像质量，建议在0到1.00之间浮动，建议在0.9左右。

• type: Number,

  类型：数字，

• default: 1.00

  默认值：1.00

scaleRatio (scaleRatio)

Allows scaling down to a specified fraction of the original size. (Example: a value of 0.5 will reduce the size by half.) Accepts a decimal value between 0 and 1.

允许缩小到原始大小的指定比例。 (示例：值为0.5会将大小减小一半。)接受介于0和1之间的十进制值。

• type: Number,

  类型：数字，

• default: null

  默认值：null

自动旋转 (autoRotate)

A boolean flag, if true then EXIF information from the image is parsed and the image is rotated correctly before upload. If false, then no processing is performed, and unwanted image flipping can happen. NB: Requires that the exif-js library is loaded. If not, a warning is echoed to the console.

一个布尔标志(如果为true)，则在上传之前，将解析来自图像的EXIF信息，并正确旋转图像。 如果为false，则不执行任何处理，并且可能发生不需要的图像翻转。 注意：需要加载exif-js库。 如果不是，则会向控制台回显警告。

• type: Boolean,

  类型：布尔值，

• default: false

  默认值：false

预习 (preview)

A boolean flag to toogle an img-tag displaying the uploaded image. When set to false no img-tag is displayed.

布尔标志，用于切换显示上载图像的img标签。 设置为false时，不显示img标签。

• type: Boolean,

  类型：布尔值，

• default: true

  默认值：true

输出格式 (outputFormat)

Sets the desired format for the returned image. Available formats are 'string' (base64), verbose (object), 'blob' (object) of 'file' (unmodified uploaded File object). NB: The 'blob' format requires that the blueimp-canvas-to-blob library is loaded. If not, a warning is echoed to the console.

为返回的图像设置所需的格式。 可用格式为“文件”(未修改的上传文件对象)的“字符串”(base64)，详细(对象)，“ blob”(对象)。 注意： “ blob”格式要求加载blueimp-canvas-to-blob库。 如果不是，则会向控制台回显警告。

• type: String,

  类型：字符串，

• default: 'string'

  默认值：“字符串”

班级名称 (className)

Sets the desired class name for the input element

为输入元素设置所需的类名

• type: String or Array

  类型：字符串或数组

• default: 'fileinput'

  默认值：'fileinput'

捕获 (capture)

Sets an optional capture attribute (camera, user, environment) to the input element. The "camera" value (or no value) let's the browser decide which camera to use, while the "user" and "environment" values tell the browser to prefer the front and rear cameras, respectively.

为输入元素设置可选的捕获属性(相机，用户，环境)。 让“浏览器”值(或无值)让浏览器决定要使用哪个相机，而“用户”和“环境”值则告诉浏览器分别偏爱前置和后置摄像头。

• type: String

  类型：字符串

• default: empty (off)

  默认值：空(关闭)

接受 (accept)

Specifies the types of files that can be submitted through the file upload. The types can be valid file extension starting with the STOP character (e.g: ".gif, .jpg, .png") or wildcare file types (e.g. audio/, video/, image/*"). To specify more than one value, separate the values with a comma

指定可以通过文件上传提交的文件类型。 这些类型可以是以STOP字符开头的有效文件扩展名(例如：“。gif，.jpg，.png”)，也可以是wildcare文件类型(例如audio / ，video / ，image / *”)。要指定多个值，用逗号分隔值

• type: String

  类型：字符串

• default: 'image/*'

  默认值：“图像/ *”

不要调整大小 (doNotResize)

Specifies filetypes that will not be resized. Accepts an array of image's extension. If only 1 extension, it can be provided directly as a string.

指定不会调整大小的文件类型。 接受图像扩展名数组。 如果只有1个扩展名，则可以直接将其作为字符串提供。

• type String or Array

  类型字符串或数组

• default: null

  默认值：null

调试 (debug)

How much to write to the console. 0 = silent. 1 = quiet. 2 = loud

写入控制台多少钱。 0 =静音。 1 =安静。 2 =大声

• type: Number,

  类型：数字，

• default: 0

  默认值：0

大事记 (Events)

@输入 (@input)

Returns the processed image in requested outputformat. From this event you can add optional hooks.

以请求的输出格式返回已处理的图像。 从此事件中，您可以添加可选的挂钩。

<image-uploader @input="setImage"></image-uploader>

methods: {
    setImage: function (file) {
      this.hasImage = true
      this.image = file
    }
  }

@onUpload (@onUpload)

On start of upload.

开始上传时。

@onComplete (@onComplete)

On end of upload.

上传结束。

路线图和待办事项 (Roadmap and todos)

1. Progress report

   进度报告

2. Support multiple files

   支持多个文件

3. Implement completion callback

   实现完成回调

4. Propper unit testing of events

   事件的支持者单元测试

5. Clean up scaffolding and project files

   清理脚手架和项目文件

6. Exclude optional dependecies from package

   从包中排除可选依赖项

项目设置 (Project setup)

yarn install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

yarn run serve

编译并最小化生产 (Compiles and minifies for production)

yarn run build

编译并缩小lib捆绑包 (Compiles and minifies lib bundle)

yarn run build-lib

运行测试 (Run your tests)

yarn run test

整理和修复文件 (Lints and fixes files)

yarn run lint

翻译自: https://vuejsexamples.com/a-simple-vue-component-for-client-side-image-upload-with-resizing/

vue移动端上传组件