精华内容
下载资源
问答
  • 详解vue 图片上传功能

    2020-10-17 01:56:32
    主要介绍了vue 图片上传功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • VUE图片上传1+2.zip

    2021-03-03 15:47:35
    VUE图片上传1.0
  • 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>
    
    展开全文
  • vue图片上传

    千次阅读 2018-08-14 17:21:38
    图片上传是以表单的形式提交,vue上传图片步骤如下: 1、绑定input框上传事件change &lt;input type="file" @change="uploadFile($event)" multiple="multiple" /&gt; 2...

    图片上传是以表单的形式提交,vue上传图片步骤如下:

    1、绑定input框上传事件change

    <input type="file" @change="uploadFile($event)" multiple="multiple" />

    2、change事件触发methods

    methods:{
        uploadFile:function(event){
          this.file = event.target.files[0]; //获取input的图片file值
          let param = new FormData(); // 创建form对象
          param.append('imgFile', this.file);//对应后台接收图片名
          axios.post('http://www.baidu.com/upload_img',param)
            .then(function(res){
              console.log(res);
            })
            .catch(function(error){
              console.log(error);
            });
        }
    }

    3、post提交图片到后台,获取后台返回的图片链接,展示在页面中

    展开全文
  • 主要为大家详细介绍了vue图片上传组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VUE 图片上传-前端

    2018-11-20 10:31:02
    vue上传图片,后台管理使用,带基本的样式,可根据自己的需求修改css,或js代码
  • vue图片上传压缩

    2018-10-18 11:55:42
    在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克: 低网速下上传进度缓慢,用户体验差 高并发下,后台处理较大的上传文件压力大 或许有更多...
  • vue 图片上传功能

    万次阅读 热门讨论 2018-01-10 10:38:27
    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: 0" v-for='(item ,index ) in imgs'> =6 ? false : true">

    这次做了vue页面的图片上传功能,不带裁剪功能的!


    首先是html代码,在input框上添加change事件,如下:

    <ul class="clearfix">
                    <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'>
                        <img :src="item">
                    </li>
                    <li style="position:relative" v-if="imgs.length>=6 ? false : true">
                        <img src="../../assets/img/addimg.png"><input class="upload" @change='add_img'  type="file">
                    </li>
    </ul>

    我这里做了图片数量的限制,最多6张。


    然后是data数据,如下:

    data () {
        return {
            imgs: [],
            imgData: {
                accept: 'image/gif, image/jpeg, image/png, image/jpg',
            }
        }
      }
    imgs数组是放图片路径的,页面显示图片就是循环这个数组,imgData是判断图片类型的。



    接下来是最重要的methods里面的方法,具体如下:

    add_img(event){  
                let reader =new FileReader();
                let img1=event.target.files[0];
                let type=img1.type;//文件的类型,判断是否是图片
                let size=img1.size;//文件的大小,判断图片的大小
                if(this.imgData.accept.indexOf(type) == -1){
                    alert('请选择我们支持的图片格式!');
                    return false;
                }
                if(size>3145728){
                    alert('请选择3M以内的图片!');
                    return false;
                }
                var uri = ''
                let form = new FormData(); 
                form.append('file',img1,img1.name);
                this.$http.post('/file/upload',form,{
                    headers:{'Content-Type':'multipart/form-data'}
                }).then(response => {
                    console.log(response.data)
                    uri = response.data.url
                    reader.readAsDataURL(img1);
                    var that=this;
                    reader.onloadend=function(){
                        that.imgs.push(uri);
                    }
                }).catch(error => {
                    alert('上传图片出错!');
                })    
    },


     首先是获取你选择的图片,判断图片的类型和大小,然后以form表单的形式提交到后台,后台会返回给你这个图片的线上路径,你把后台返回的图片路径push到图片数组里面就可以了。 
    

    一般情况下还有删除图片的方法,就是把图片数组里的那个路径删除掉,把数据提交到后台,告诉后台删除了哪张图片就可以了。



    展开全文
  • Vue图片上传预览

    千次阅读 2018-10-10 17:48:31
    Vue图片上传预览 想要的效果 代码实现 页面核心代码   &lt;h3&gt;添加新图:&lt;/h3&gt; &lt;img src="" alt="" id="portrait" style="width: 300...

    Vue图片上传预览

    想要的效果

    代码实现

    • 页面核心代码

       

      <h3>添加新图:</h3>
      <img src="" alt="" id="portrait" style="width: 300px;height: 200px;background-color: #eeeeee"/>
      <input type="file" id="saveImage" name="myphoto" accept="image/png,image/gif,image/jpeg"
             ref="new_company_image">
      <el-button @click="addImage">确认添加</el-button>
      
    • script核心代码
      • 方法代码

         

        great: function () {
            document.getElementById('saveImage').onchange = function () {
                var imgFile = this.files[0];
                var fr = new FileReader();
                fr.onload = function () {
                    document.getElementById('portrait').src = fr.result;
                };
                fr.readAsDataURL(imgFile);
            }
        }
        
      • 挂载上述方法

         

        mounted: function () {
            this.great();
        }
        

    测试运行

    展开全文
  • 主要为大家详细介绍了vue图片上传本地预览组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在实际开发中会遇到一些图片上传的问题,避免采坑,拿走直接用 <template> <div> <div>导入并预览</div> <el-upload class="upload-demo" action=...
  • vue图片上传组件

    万次阅读 2018-09-05 10:19:19
    vue图片上传组件 最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记。 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是...
  • 一个Vue图片上传剪裁压缩组件
  • 主要为大家详细介绍了springboot整合vue实现上传下载文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue图片上传选择图片显示

    千次阅读 2019-01-08 13:37:44
    给input外围套一个div把input宽高设为100%并且隐藏,给div一个背景图片,设置两个class名,filediv2中input给display:none;第一个input的class名设为filediv其他的为filediv2 css样式 .filedivs { float ...
  • 使用Vue实现图片上传的三种方式

    万次阅读 多人点赞 2019-03-06 19:26:48
    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景...
  • vue 图片上传 图片展示 bootstrap

    千次阅读 2017-05-16 10:19:52
    //将图片上传到后台,得到后台图片的路径。 vm.queryFirmInfo[ "idPicUrl" ]=result.url; $( "#dForm" ).formValidation( 'revalidateField' , "idPicUrl" ); } else { layer.msg( "修改图片失败!" ) } })...
  • php+vue图片上传

    千次阅读 2019-03-26 18:13:39
    vue 前端上传图片 通过base64 加密 传给后端 $files = input('img'); //获取数据 $info = substr($files,23); //这里根据传过来的样式格式 自行解决data:image/jpeg;base64, 因为我接到的数据开头有一些这种...
  • 另一个Vue图片上传组件 每个标签一张图片 提供调整大小选项 提供基本的人像/风景支持 提供直接上传选项 接受公关 安装 npm install croppie --save // all othe dependecies npm install vue-img-upload --save ...
  • vue实现图片上传功能

    2020-12-28 17:48:46
    本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 先看效果 图片上传使用vant组件库中的 van-uploader, 使用方法参考官网 vant组件库 下面看代码 UploadPicture.vue <!-- ...
  • vue图片上传及压缩组件的封装 源码地址 使用方法: 先去上面的链接把组件,复制到自己的components文件夹内 1.先下载 cnpm install compressorjs --save-dev //压缩 2.引入组件 <script> import upload...
  • vue图片上传预览功能

    万次阅读 2018-12-03 15:04:12
    效果图 html结构 &amp;lt;ul class=&...gallery-window-map&...--点击上传按钮--&amp;gt; &amp;lt;li class=&quot;house-pic-item&quot; v-if=&quot;!(!item.isNew
  • vue 图片上传并压缩

    2020-08-24 11:32:54
    <...div id="vue-img-uploader"> <input type="file" accept="image/*" :id="componentId" @change="getFile"> <template v-if="files.length>0"> <div class="vue..
  • vue2图片上传组件

    2019-08-10 02:18:36
    vue2 图片上传组件
  • 图片上传下载(SpringBoot+Vue
  • vue 图片裁剪上传

    千次阅读 2018-11-08 11:48:44
    最近写的一个项目用到头像上传,需要裁剪功能,缩放功能,能具备压缩上传功能,因为手机现在的像素太好了,随便一张图片的大小都上M了,而且要求手机端和pc端都可要可以使用。通过网上找到了一个合适的插件(vue-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,310
精华内容 11,724
关键字:

vue图片上传下载

vue 订阅