移动端相册选择并上传图片

10 篇文章 0 订阅
8 篇文章 1 订阅
<input ref="fileInput" multiple id="fileInput" @change="getImg" type="file" accept="image/jpeg,image/jpg,image/png">
<img :src="item.src" alt="" srcset="" v-for='(item,index) in upImg' :key="index">
getImg(){
     let inputDOM = this.$refs.fileInput
     this.files= inputDOM.files
     let oldLen= this.upImg.length
     let len=this.files.length+oldLen
     if(len>3){
         alert('最多可上传3张,您还可以上传'+(3-oldLen)+'张');
         return false;
     }
     for (let i=0; i < this.files.length; i++) {
         let size = Math.floor(this.files[i].size / 1024);
         if (size > 3*1024*1024) {
             alert('请选择3M以内的图片!');
             return false
         }

         // file对象转换成url
         this.files[i].src = this.getObjectURL(this.files[i])
         this.upImg.push(this.files[i]);
     }
 },
 getObjectURL(file) {
     var url = null ;
     if (window.createObjectURL!=undefined) { // basic
             url = window.createObjectURL(file) ;
     } else if (window.URL!=undefined) { // mozilla(firefox)
             url = window.URL.createObjectURL(file) ;
     } else if (window.webkitURL!=undefined) { // webkit or chrome
             url = window.webkitURL.createObjectURL(file) ;
     }
     return url ;
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值