图片上传组件

图片上传组件
2016-09-08 15:16:28
图片上传组件
收起
ASP图片上传组件图片批量上传控件图片上传插件
2015-12-06 02:42:20
ASP图片上传组件图片批量上传控件图片上传插件
收起
vue2图片上传组件
2019-08-10 02:18:36
vue2 图片上传组件
收起
jQuery移动端图片上传组件
2020-10-22 03:35:18
主要介绍了jQuery移动端图片上传组件，使用File API+canvas 客户端压缩图片，并实现文件上传服务端，感兴趣的小伙伴们可以参考一下
收起
vue图片上传组件使用详解
2020-10-15 20:27:53
主要为大家详细介绍了vue图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收起

Jquery图片上传组件

千次阅读 2018-07-12 21:16:07

插件描述：jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。图片上传组件下载地址下载文件...

插件描述：jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
图片上传组件下载地址
下载文件更新时间：2016-08-19（修改官网调用地址不能访问问题）
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。
支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
产品特点
多文件上传：
允许选择多个文件一次，并将其上传同时进行。
拖放支持：
可以从您的桌面或文件管理器中拖放他们在您的浏览器窗口中上传文件。
上传进度条：
显示一个进度条显示为单独的文件和所有上传组合上传进度。
可取消上传：
单个文件上传可以取消来停止上传进度。
可恢复上传：
中止的上传可以与浏览器支持的Blob API进行恢复。
分块上传：
大文件可以上传较小的块与浏览器支持的Blob的API 。
客户端图像大小调整：
图像可以自动调整大小的客户端与浏览器支持所需的JS API的。
预览图像，音频和视频：
图像，音频和视频文件的预览可以与浏览器支持所需的API上传前显示。
没有浏览器插件（例如使用Adobe的Flash ）要求：
该实现是基于开放的标准，如HTML5和JavaScript的，不需要额外的浏览器插件。
优美的后备旧版的浏览器：
如果支持的话，使用内置页框作为后备旧版浏览器通过的XMLHttpRequest上传文件。
HTML文件上传表单回退：
通过使用标准的HTML文件上传表单的控件元素允许渐进增强。
跨站点的文件上传：
支持上传文件到不同的域与跨站点的XMLHttpRequest或iframe重定向。
多个插件实例：
允许使用在同一个网页上的多个插件实例。
可定制和可扩展的：
提供了一个API来设置各个选项，并定义回调方法的各种载事件。
多重和文件内容流上传：
文件可以被上传为标准的“多部分/窗体的数据”或文件内容流（ HTTP PUT文件上传） 。
兼容任何服务器端应用平台：
适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。
用法
下载压缩包，解压到网站就可用（与demo）一样（PHP环境）。
最小化安装向导（适用于需要自己定义界面元素的童鞋）：
需要一个input元素：<input id="fileupload" type="file" name="file[]" multiple>
需要加载的js文件有:
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
代码例子（摘自官方）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>
最小安装如何显示上传进度条：
插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示：
1
2
3
4
5
6
7
8
9
10 $('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});
需要一个<div>容器用来显示进：
1
2
3 <div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
需要给进度条不同颜色显示才行，可以通过CSS来设置：
1
2
3
4 .bar {
    height: 18px;
    background: green;
}
将要上传的文件名显示在一个元素节点上：
你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
1
2
3
4
5
6
7
8
9
10
11
12 $(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});
如何通过点击按钮来开始上传：
在上例基础上，可以通过按钮点击事件来触发上传（上例是自动上传）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 $(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    $(this).replaceWith($('<p/>').text('Uploading...'));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});
图片上传组件下载地址
图片上传组件下载地址

收起

展开全文

图片上传组件_单图片上传组件

2021-01-12 14:42:16

单图上传，调用存图接口，后台返回图片路径效果图组件代码import React, { PureComponent, Fragment } from 'react'; import { Upload, Icon, message } from 'antd'; import { connect } from 'dva'; @connect(({ ...


单图上传，调用存图接口，后台返回图片路径
效果图
组件代码
import React, { PureComponent, Fragment } from 'react';
import { Upload, Icon, message } from 'antd';
import { connect } from 'dva';

@connect(({ file, loading }) => ({
  file,
  loading: loading.models.file,
}))

@Form.create()
export default class UploadImage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      imageUrl: props.imageUrl,
      load: false,
      disabled: props.disabled || false,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      imageUrl: nextProps.imageUrl,
      disabled: nextProps.disabled,
    });
  }

  beforeUpload = (file, fileList) => {
    this.setState({
      load: true
    });
    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type == 'image/png' || file.type == 'image/bmp'
    if (!isJPG) {
      message.error('请上传正确格式的图片');
      this.setState({
        load:false,
      });
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!isLt2M) {
      message.error('图片大小不得超过1M');
      this.setState({
        load:false,
      });
      return false;
    }
    if (isJPG && isLt2M) {
      setTimeout(() => {
        /**
         * @param {Array}  pxSize 数组控制图片大小第一项为宽，第二项为高
         */
        const { pxSize } = this.props;
        if(pxSize && pxSize.length){
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            if(img.width === pxSize[0] && img.height === pxSize[1]){
              this.uploadFile(file);
              return
            }
            message.error('图片大小不符合尺寸要求');
            this.setState({
              load: false
            });
          }
          img.src = _URL.createObjectURL(file);
        }else{
          this.uploadFile(file);
        }
      }, 500)
    }
    return false;
  };

  uploadFile(file) {
    let that = this;
    let formData = new FormData();
    formData.append('file', file);
    this.props.dispatch({
      type: 'file/uploadFile',
      payload: {
        file: formData,
        fileName: new Date().getTime() + '_' + file.name
      },
      callback: (data) => {
        that.setState({
          load: false
        });
        if(data.errorKey == 0) {
          that.props.handleCallback(data.result.fileUrl)  
        }
      }
    });
  }

  render() {
    const uploadButton = (
      <div>
        <Icon type={this.state.load ? 'loading' : 'plus'} />
        <div className="ant-upload-text">上传</div>
      </div>
    );
    const imageUrl = this.state.imageUrl;
    return (
      <Upload
        name="file"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="/store-user/api/file/uploadfile"
        beforeUpload={this.beforeUpload}
        disabled={this.state.disabled}
      >
        {imageUrl ? <img src={imageUrl} alt="" style={{width: '140px', height: '140px'}}/> : uploadButton}
      </Upload>
    );
  }
}
调用页面
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router'
import UploadImage from '../../../components/UploadImage';

@connect(({ purchase }) => ({ purchase }))

export class BaseConfig extends Component {

  state = {
    picture: '默认图片路径',
  };

  componentDidMount() { }

  //上传图片
  handleCallback = (type, url) => {
    let payload = {};
    payload[type]=url;
    this.props.form.setFieldsValue(payload);
  };


  render() {
   
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem {...formItemLayout} label="图片" >
          {getFieldDecorator('picture', {
            initialValue: this.state.picture ,
            rules: [{
              required: true, message: '请上传图片',
            }],
          })(
            <UploadImage
              imageUrl={this.state.picture || null}
              handleCallback={this.handleCallback.bind(this, 'picture')}
              disabled={!canEdit}
              pxSize={[750,360]}
            />
          )}
          <div style={{ lineHeight : "24px"}}>（750*360，支持格式jpg、jpeg、bmp、png，文件大小1M以内）</div>
        </FormItem>
      </Form>
    )
  }
}
services文件
import request from '../utils/request';

/**
 * 上传文件
 * @param params
 * @returns {Promise<Object>}
 */
export async function uploadFile(params) { // targetPath ：分级目录名称
  let url = '存图路径?targetPath=scrm%2F&fileName=' + params.fileName;
  if (params.targetPath) {
    url = '存图路径?targetPath=' + encodeURIComponent(params.targetPath) + '&fileName=' + params.fileName;
  }
  return request(url, {
    method: 'POST',
    body: params.file,
  });
}
models文件
import { routerRedux } from 'dva/router';
import { uploadFile } from '../services/file';

export default {
  namespace: 'file',
  state: {},
  effects: {
    *uploadFile({ payload, callback }, { call, put }) {
      let response = yield call(uploadFile, payload);
      callback(response);
    },
  },
};

收起

展开全文

vue.js框架图片上传组件特效代码
2021-03-20 03:56:04
vue.js框架图片上传组件是一款适用于手机端的图片上传代码，支持批量上传，拖到图片上传，显示文件数量和大小等功能。
收起

vue 图片上传组件

千次阅读 2017-11-06 21:34:11

vue图片上传组件 vue图片上传组件，实现批量上传和单张上传功能，控制图片大小，数量，以及压缩处理，利用了mint-ui的提示框监听两个参数，分别是MAX控制最多上传的数量，multiple控制是否批量上传，self.$emit...

vue图片上传组件


  vue图片上传组件，实现批量上传和单张上传功能，控制图片大小，数量，以及压缩处理，利用了mint-ui的提示框 

  监听两个参数，分别是MAX控制最多上传的数量，multiple控制是否批量上传，self.$emit(‘fileChange’, {base64, file, files});将处理后的数据通过自定义事件传递给父组件，父组件获取到压缩处理后的文件就可以使用AJAX等技术post给后台实现文件上传功能


<template>
  <div>
    <input ref="file"
           type="file"
           class="file-input"
           accept="image/*"
           :multiple="multiple"
           @change="change"/>
  </div>
</template>

<script>
  import {Indicator, MessageBox} from 'mint-ui';
  //  M设定可以上传图片的大小
  const M = 7;
  const UNIT = 1024;
  const MAX_SIZE = M * UNIT * UNIT;

  /**
   * @author xx
   *
   * @desc 图片上传
   * @module @components/updatefile
   *
   * @example
   * import {updatefile} from @components
   * Vue.component(Updatefile.name, Updatefile)
   * <updatefile :multiple="multiple"
   *                :max="max"
   *                @refDom="getDom"
   *                @fileChange="fileChange">
   * </updatefile>
   */
  export default {
    name: 'updatefile',
    /**
     * @member {Object}
     * @name props
     * @property {Boolean} multiple 是否可以同时上传多个文件
     * @property {Number} max 最多一次可以上传多少张
     */
    props: {
      multiple: Boolean,
      max: Number
    },
    data() {
      return {

      };
    },
    mounted() {
      this.getDom();
    },
    methods: {
      // 获取dom元素外部点击触发
      getDom() {
        let file = this.$refs.file;
        this.$emit('refDom', file);
      },
      // 图片数量是否超过max张
      isOutNumber(files) {
        const MAX = this.max;
        if (files.length > MAX) {
          MessageBox({
            title: '提示',
            message: `一次最多允许上传${MAX}张！`
          });
          return true;
        } else {
          return false;
        }
      },
      change(e) {
        let files = e.target.files;
        // 如果超过设定的张数张，提示
        if (this.isOutNumber(files)) {
          return;
        }
        let len = files.length;
        for (let i = 0; i < len; i++) {
          if (window.FileReader && files[i]) {
            if (files[i].size <= MAX_SIZE) {
              Indicator.open();
              // 读取文件转化图片base64
              let fr = new FileReader();
              let self = this;
              fr.onload = (e) => {
                let w = 300;
                let h = 300;
                let file = files[i];
                let compressPic = function(base64) {
                  // 将压缩处理后的图片传递出去
                  self.$emit('fileChange', {base64, file, files});
                };
                self.canvasDataUrl(e.target.result, w, h, compressPic);
              };
              fr.onerror = (e) => {
                Indicator.close();
              };
              fr.readAsDataURL(files[i]);
            } else {
              MessageBox({
                title: '警告',
                message: `${files[i].name}图片尺寸过大，图片请小于7M！`
              });
            }
          }
        }
      },
       //  利用canvas压缩图片
      canvasDataUrl(data, w, h, callback) {
        let newImg = new Image();
        newImg.src = data;
        let imgWidth, imgHeight;
        newImg.onload = () => {
          let img = document.createElement('img');
          img.src = newImg.src;
          imgWidth = img.width;
          imgHeight = img.height;
          let canvas = document.createElement('canvas');
          let ctx = canvas.getContext('2d');
          if (imgWidth > imgHeight) {
            imgWidth = w * imgWidth / imgHeight;
            imgHeight = h;
          } else {
            imgHeight = h * imgHeight / imgWidth;
            imgWidth = w;
          };
          canvas.width = imgWidth;
          canvas.height = imgHeight;
          ctx.clearRect(0, 0, w, h);
          // 处理png格式图片背景变黑的问题
          ctx.fillStyle = '#fff';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
          let rate = 0.7;
          let base64 = canvas.toDataURL('image/jpeg', rate);
          callback(base64);
        };
      }
    }
  };
</script>

收起

展开全文

压缩批量上传图片

Flash图片上传组件 swfupload使用指南
2020-09-03 21:58:14
主要介绍了Flash图片上传组件 swfupload使用方法及示例，swfupload的使用范围十分的广泛，功能也很强大，今天我们就先来简单的通过范例来学习下。
收起
纵横HTTP图片上传组件 v5.03
2019-11-02 17:56:46
2、该图片上传组件支持图片编辑（水平镜像，垂直镜像，旋转等)，支持图片全屏预览. 3、是一个采用ATL+WTL编写超级轻量级组件，运行不依赖MFC库，UImageUploaderD.dll(Release版本)只有164Kb，打成cab包之后会更小. ...
收起

vue图片上传组件

2020-04-28 14:14:09

前言：很多项目中都需要用到图片上传功能，而其多处使用的要求，为了避免重复造轮子，让我决定花费一些时间去深入了解，最终封装了一个vue的图片上传组件。现将总结再次，希望有帮助。 Layout <div class=...


前言：很多项目中都需要用到图片上传功能，而其多处使用的要求，为了避免重复造轮子，让我决定花费一些时间去深入了解，最终封装了一个vue的图片上传组件。现将总结再次，希望有帮助。


Layout

<div class="upload-wraper">
      <input type="file" id="upload_ele" multiple="false" accept="image/*" @change="uploadFile()" />
  </div>

type=file将类型设置为选择文件

multiple是否允许文件的多选

accept="image/*" 将文件的类型限制为image类型，*包括所有格式的图片

change事件当type设置为file后，出发的事件为change,也可通过submit实现

这里布局的话，因为是vue组件所以简单点，不需要多个input构成form表单，然后通过submit提交，一个input通过change事件来实现上传

Js

Basic information for uploading files

 let oFIle = document.getElementById('upload-ele').files[0];

files是input设置为file后的一个js内置对象。files对象死一个read-only属性，不可被修改！

打印出oFile后可以看到该文件对象的basic information.如下：

isClosed:false 是否已经结束，可以理解为标签是否闭合

lastModified:1539602132000最后更改的时间timeStamp

lastModifiedDate:Mon Oct 15 2018 19:15:32 GMT+0800 (CST) {}最后更改时间

name:"D9791645A5DF19D17FD7392A080E7A28.jpg"图片的名称

path:"/Users/mac/Documents/D9791645A5DF19D17FD7392A080E7A28.jpg"图片所在的路径为本地路径

Size:38938图片的大小信息 单位为kb

type:'image/jpeg'图片的类型

webkitRelativePath:""文件相关的路径

File Size Processing

大小判断

(oFile.size / 1024) > 1024


1M = 1024KB


Smaller

let form = new FormData();
  form.append('file',oFile);
  let xhr = new XMLHttpRequest();
  xhr.open('post',url,true);
  xhr.timeout = 30 * 1000;
  xhr.upload.onprogress = this.progress;
  xhr.onload = this.uploadComplete;
  xhr.onerror = this.uploadFailed;
  xhr.upload.onloadstart = () => {
      let date = new Date().getTime();
      let initSize = 0;
  }
  xhr.send(form);

XMLHttpRequest()是js内置对象，可以使用该属性实现请求头的处理操作。

xhr.open(); 请求方法: post,url: 服务器接受的地址,true/false 是否异步

xhr.timeout; 设置超时时间，据情况而定

xhr.ontimeout; 超时处理，一般为取消请求

xhr.upload.onprogress; 进程处理 ，上传文件的进度处理

xhr.onload; 请求成功处理

xhr.onerror; 请求失败处理

Xhr.upload.onloadstart; 请求开始处理的操作，一般创建时间戳，初始化大小。

xhr.send(); 请求配置完毕，发送请求

这里小于1M的文件是可以直接通过放到formData中，通过配置xhr将图片对象上传到oss，在请求成功时拿到图片的网络路径供后，提供给后端。

Larger

why：为什么要对大于1M的图片进行处理呢？因为文件在大于1M的一般是上传失败的。常见的ftp文件上传时，默认是2M，大于时，会上传失败，所以这里的图片上传进行了大于1M压缩的处理。

how：流程与小于1M时十分相似，不过，这里添加了图片的压缩处理。

more：一般在较大文件处理时，后端也是可以进行处理的，单独提供较大图片的接口。这时，我们就不需要进行压缩了，只需要在判断大于1024KB时接口更换为处理较大文件的接口即可。

如何压缩？


	通过FileReader对象将文件对象读取成base64格式。
	
	
	通过Image对象结合canvas画布将base格式的图片将一定的比例缩小后重新保存成为base64格式。
	
	
	将base64格式转换成Blob流后，图片就可以说是压缩完成了。
	
	
	剩下的步骤重复formData,XMLHttpRequest即可完成较大图片的上传。这里需要注意的是，在formData中防止文件时，因为此时是Blob流，所以防止文件时，需要自定义文件格式，这里的处理是 Blob文件 + 时间戳与.jpg组成。
	
组件源码

<template>
  <!-- 图片上传组件 -->
    <div class="upload-wraper">
      <input type="file" id="upload-ele" multiple="false"  accept="image/*" @change="uploadFile(url,quality,hasApi,BigUrl)">
      <toast v-model="total.isShow" type="text">{{total.text}}</toast>
    </div>
  </template>
  <script>
  import { Indicator } from 'mint-ui';
  import { Toast } from 'vux';
  export default {
    name: 'uploadImage',
    components: {
      Indicator,
      Toast,
    },
    props: {
      'url': String, //小与1M的api
      'quality': Number, //图片质量
      'BigUrl': {
        type: String,
        default: '',
      }, //大于1M图片的api
      'hasApi': {
        type: Boolean,
        default: false
      } //是否对大于1M的图片单独分配接口
    },
    data() {
      return {
        total: {isShow:false,text:""}
      }
    },
    methods: {
      uploadFile(url,quality,hasApi,BigUrl) {
        Indicator.open(`上传中`);
        // files是input设置为file后的一个内置对象。files对象是一个只读属性，不可被修改。
        var oFile = document.getElementById('upload-ele').files[0];
        console.log('File Object',oFile);
        var form = new FormData();
        // 大小判断 如果大于1M就新型压缩处理
        // console.log('File Size Unit：KB',(oFile.size / 1024))
        if((oFile.size / 1024) > 1024) {
          if(hasApi) {  
            form.append('file',oFile);
            let xhr = new XMLHttpRequest(); //XMLHttpRequest Object
            xhr.open('post',BigUrl,true); // Method: post,url: server receive address,true/false isAsync
            xhr.timeout = 30 * 1000;  //Timeout one minute;
            xhr.ontimeout = this.uploadTimeout; // Upload Timeout Function
            xhr.upload.onprogress = this.progress; //Progress Function
            xhr.onload = this.uploadComplete; //Upload Success Function
            xhr.onerror = this.uploadFailed; //Upload Failed Funciton
            xhr.upload.onloadstart = () => {
              let date = new Date().getTime(); // TimeStamp Prevents Caching
              let initSize = 0; // Init File Size Zero
            } // Upload Start
            xhr.send(form);
          } else {
            this.imgCompress(oFile,{quality: quality},
            (base64Codes) => {
              var bl = this.convertBase64UrlToBlob(base64Codes);
              form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
              console.log(form);
              let xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
              xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
              xhr.upload.onprogress = this.progress; //Progress Function
              xhr.ontimeout = this.uploadTimeout; // Upload Timeout Function
              xhr.onload = this.uploadComplete; //Upload Success Function
              xhr.onerror = this.uploadFailed; //Upload Failed Funciton
              xhr.upload.onloadstart = function() {
                let ot = new Date().getTime(); // TimeStamp Prevents Caching
                let oloaded = 0; // Init File Size Zero
              };// Upload Start
              xhr.send(form); 
            })
          }
        } else {
          // 小与1M
          form.append('file',oFile);
          let xhr = new XMLHttpRequest(); //XMLHttpRequest Object
          xhr.open('post',url,true); // Method: post,url: server receive address,true/false isAsync
          xhr.timeout = 30 * 1000;  //Timeout one minute;
          xhr.ontimeout = this.uploadTimeout; // Upload Timeout Function
          xhr.upload.onprogress = this.progress; //Progress Function
          xhr.onload = this.uploadComplete; //Upload Success Function
          xhr.onerror = this.uploadFailed; //Upload Failed Funciton
          xhr.upload.onloadstart = () => {
            let date = new Date().getTime(); // TimeStamp Prevents Caching
            let initSize = 0; // Init File Size Zero
          } // Upload Start
          xhr.send(form); 
        }
      },
      /**
       * @description Request Success
       */
      uploadComplete(evt) {
        let res = JSON.parse(evt.target.responseText);
        if(evt.target.readyState == 4 && evt.target.status == 200) {
          this.$emit('upload',res.result.url);
        } else {
          this.uploadFailed();
        }
      },
      /**
       * @description Request Failed
       */
      uploadFailed(evt) {
        Indicator.close();
        this.total = {
          isShow:true,
          text:"上传失败"
        }
      },  
    /**  
     * @description Timeout Function  
     */  
    uploadTimeout(evt) {  
      this.cancleUploadFile(evt)  
      Indicator.close();  
      this.total = {  
        isShow:true,  
        text:"请求超时"  
      }  
    },  
    /**e  
     * @description Upload Cancel  
     */  
    cancleUploadFile(evt) {  
      evt.abort();  
    },  
    /**  
     * @description Requst Loading....  
     */  
    progress(progressEvent) {  
      if(!progressEvent.lengthComputable) {  
        this.total = {  
          isShow:true,  
          text:"进度读取失败"  
        }  
        return false;  
      }  
      let precent = Math.floor(100 * progressEvent.loaded / progressEvent.total); //Upload Progress  
      if(precent < 100) {  
        Indicator.open(`上传中${precent}%`);  
      } else {  
        Indicator.close();  
        this.total = {    
          isShow:true,  
          text:"上传成功"  
        }  
      }  
    },  
    /**  
      * @description 图片压缩  
      * @param {Object} file 压缩的文件  
      * @param {Number} width 压缩后端宽度，宽度越小，字节越小  
      */  
    imgCompress(file,width,callBack) {  
      var ready = new FileReader();  
      ready.readAsDataURL(file);  
      ready.onload = () => {  
        this.canvasDataURL(ready.result,width,callBack);  
      }      
    },  
    /**  
     * 将以base64的图片url数据转换为Blob  
     * @param urlData  
     * 用url方式表示的base64图片数据  
     */  
    convertBase64UrlToBlob(urlData) {  
      var arr = urlData.split(","),  
        mime = arr[0].match(/:(.*?);/)[1],  
        bstr = atob(arr[1]),  
        n = bstr.length,  
        u8arr = new Uint8Array(n);  
      while (n--) {  
        u8arr[n] = bstr.charCodeAt(n);  
      }  
      return new Blob([u8arr], { type: mime });  
    },    
    /**  
     * @description 大于1M的图片进行重新绘制压缩  
     */  
    canvasDataURL(path, obj, callback) {  
      var img = new Image();  
      img.src = path;  
      img.onload = () => {  
        // var that = this;  
        // 默认按比例压缩  
        var w = this.width,  
          h = this.height,  
          scale = w / h;  
        w = obj.width || w;  
        h = obj.height || w / scale;  
        var quality = 0.7; // 默认图片质量为0.7  
        //生成canvas  
        var canvas = document.createElement("canvas");  
        var ctx = canvas.getContext("2d");  
        // 创建属性节点  
        var anw = document.createAttribute("width");  
        anw.nodeValue = w;  
        var anh = document.createAttribute("height");  
        anh.nodeValue = h;  
        canvas.setAttributeNode(anw);  
        canvas.setAttributeNode(anh);  
        ctx.drawImage(img, 0, 0, w, h);  
        // 图像质量  
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {  
          quality = obj.quality;  
        }  
        // quality值越小，所绘制出的图像越模糊  
        var base64 = canvas.toDataURL("image/jpeg", quality);  
        // 回调函数返回base64的值  
        callback(base64);  
      };  
    },  
  }  
}  
</script>  
<style lang="less" scoped>  
  .upload-wraper {  
    width: 100%;  
    height: 100%;  
  }  
</style>

这里是公众号项目，所以，这里引入的第三方插件为mint-ui和vux。具体情况视情况而定。

该组件例外封装了，后端是够对较大图片的处理，如果后端已经进行处理，则直接调用。如果没有处理，则进行压缩处理，

组件的封装，可灵活修改，还有很多地方仍待修改


插槽，图片上传后，回显可在组件内部实现。借由slot更加完美。

该组件限制了图片文件的上传，其他文件则不行。


引入如下：

 <upload-image class="upload" :quality='.7' :url="$base.uploadUrl" :hasApi="false" @upload='uploadImage'></upload-image>

参考文献


	js内置file（文件）对象。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
	
	
	FormData对象的。https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
	
	
	XMLHttpRequest对象。https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
	
	
	Image对象。https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
	
	
	Canvas画布。内容较多，建议通过学习视频了解。在本文中主要用于大型图片的压缩处理。
	
	
	base64和Blob的转换，百度很多已经封装好的。可直接使用。eg：https://www.cnblogs.com/jiujiaoyangkang/p/9396043.html

收起

展开全文

Vue 组件化 upload 图片上传组件
2020-08-30 22:11:13
这是一个图片上传组件 组件名为upload 通过这个组件可以上传图片给服务器 <template> <div> 活动封面： <input type="file" accept="image/*" @change="changeImage()" ref="avatarInput"/>...
收起
vue.js html javascript
vue+elementUi图片上传组件使用详解
2020-10-16 13:14:32
主要为大家详细介绍了vue+elementUi图片上传组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收起
纵横HTTP图片上传组件
2019-09-25 23:48:29
纵横HTTP图片上传组件 ...
收起
vue.js框架图片上传组件.zip
2019-07-04 23:39:16
vue.js框架图片上传组件是一款适用于手机端的图片上传代码，支持批量上传，拖到图片上传，显示文件数量和大小等功能。
收起
vue封装图片上传组件，nodejs实现图片上传
2020-07-12 01:47:30
今天来造一个轮子，vue的图片上传组件，虽说ElementUI已经有了，但是不满足我的需求，所以不得已造了一个个人博客后台每篇博文需要上传一张主图我的需求是在编辑文章的时候获取到存在的图片，可以将其删除重新...
收起
图片上传组件_如何用原生js写图片上传组件v2.0（还有新版本）？
2021-01-12 05:38:47
js图片上传组件：基本要求：1.上传的图片可预览，可删除，可被覆盖更新2.要求图片格式为jpg和png，大小不能超过2M新加需求：1.模拟回显，可用本地存储（实际上的回显是通过后台传过来的url）2.写传给后台的方法3....
收起
react-reactuplodimg是一个基于Reactantd组件的图片上传组件
2019-08-14 18:21:53
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能
收起
vux uploader 图片上传组件的安装使用方法
2020-08-27 12:43:52
主要介绍了vux-uploader 图片上传组件的安装及使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
收起
【组件】element图片上传组件
2020-11-05 10:51:28
封装的图片上传组件 <template> <div class="public-upload-image"> <el-upload ref="uploadImage" action="https://upload.qiniup.com" :on-success="handleAvatarSuccess" :before-upload=...
收起

图片上传组件

ASP图片上传组件图片批量上传控件图片上传插件

vue2图片上传组件

jQuery移动端图片上传组件

vue图片上传组件使用详解

Jquery图片上传组件

多文件上传：

用法

图片上传组件_单图片上传组件

组件代码

调用页面

services文件

models文件

vue.js框架图片上传组件特效代码

vue 图片上传组件

vue图片上传组件

Flash图片上传组件 swfupload使用指南

纵横HTTP图片上传组件 v5.03

vue图片上传组件

Layout

Js

Basic information for uploading files

File Size Processing

大小判断

Smaller

Larger

组件源码

参考文献

Vue 组件化 upload 图片上传组件

vue+elementUi图片上传组件使用详解

纵横HTTP图片上传组件

vue.js框架图片上传组件.zip

vue封装图片上传组件，nodejs实现图片上传

图片上传组件_如何用原生js写图片上传组件v2.0（还有新版本）？

react-reactuplodimg是一个基于Reactantd组件的图片上传组件

vux uploader 图片上传组件的安装使用方法

【组件】element图片上传组件

图片上传组件

图片上传组件

ASP图片上传组件 图片批量上传控件 图片上传插件

vue2图片上传组件

jQuery移动端图片上传组件

vue图片上传组件使用详解

Jquery图片上传组件

多文件上传：

用法

图片上传组件_单图片上传组件

组件代码

调用页面

services文件

models文件

vue.js框架图片上传组件特效代码

vue 图片上传组件

vue图片上传组件

Flash图片上传组件 swfupload使用指南

纵横HTTP图片上传组件 v5.03

vue图片上传组件

Layout

Js

Basic information for uploading files

File Size Processing

大小判断

Smaller

Larger

组件源码

参考文献

Vue 组件化 upload 图片上传组件

vue+elementUi图片上传组件使用详解

纵横HTTP图片上传组件

vue.js框架图片上传组件.zip

vue封装图片上传组件，nodejs实现图片上传

图片上传组件_如何用原生js写图片上传组件v2.0（还有新版本）？

react-reactuplodimg是一个基于Reactantd组件的图片上传组件

vux uploader 图片上传组件的安装使用方法

【组件】element图片上传组件

图片上传组件

ASP图片上传组件图片批量上传控件图片上传插件