• vue实现拍照上传 + base64 上传功能


    <style>
      .head_pic{
        width: 200px;
        height: 200px;
        background: #fff;
       /* border: 1px solid #e1e1e1; */
        border-radius: 8px;
        margin: 10px auto;
        overflow: hidden;
      }
    
    
      .head_pic img{
        width: 100%;
        height: 100%;
      }
    
      .upload_warp_text span{
        display: block;
        font-size: 14px;
        line-break: 36px;
        color: #666;
        padding-left: 20px;
      }
    
    
      .upload_warp_buttonPic i{
        display: inline-block;
        font-size: 14px;
        line-height: 26px;
        color: #fff;
        font-style: normal;
        background: #1aad19;
        border-radius: 4px;
        padding: 4px 10px;
        position: relative;
    
      }
      .upload_warp_buttonPic{
        padding:10px 20px;
      }
      .upload_warp_buttonPic input{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    
      .upload_warp_button{
        position: fixed;
        bottom: 86px;
        left: 20px;
        right: 20px;
      }
    
        .upload_warp_button button{
          width: 100%;
          background: #1aad19;
          border: 0;
          border-radius: 4px;
          font-size: 18px;
          line-height: 36px;
          color: #fff;
        }
    </style>
    <template>
    
       <div>
          <selector placeholder="请选择小区" v-model="demo" title="小区" :options="shequ"></selector>
          <div class="upload_warp_buttonPic">
              <i>选择文件</i>
              <input id="upload_file" type="file" style="" accept='image/*' name="file"  @change="fileChange($event)"/>
            </div>
             <div class="upload_warp_text">
              <span>选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}}</span>
            </div>
         <div class="head_pic">
            <div class="upload_warp">
          <div class="upload_warp_img">
            <div class="upload_warp_img_div"  v-for="(item,index) in imgList" :key="index">
              <!-- <div class="upload_warp_img_div_top">
                <img src="" class="upload_warp_img_div_del" @click="fileDel(index)">
              </div> -->
              <img :src="item.file.src" style="display: inline-block;">
            </div>
            <!-- <div class="upload_warp_left" id="upload_warp_left" @click="fileClick()" v-if="this.imgList.length < 6">
              <img src="../assets/upload.png">
              <img src="" class="imgs"/>
            </div> -->
          </div>
        </div>
       
         </div>
    
           <div class="upload_warp_button">
             <x-button style="margin-top:10px;" type="primary" action-type="button" @click.native="commit">保存</x-button>
              <!-- <button  @click="commit()">确认</button> -->
            </div>
        <div class="image-item space" @click="showActionSheet()">
          <div class="image-up"></div>
        </div>
      </div>
    </template>
    <script  type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/ecmascript-6">
    import {
      Box,
      Toast
    } from 'vux'
        export default {
          name: "cameras-and-albums",
          data(){
            return{
              imgList: [],
              datas: new FormData(),
              files:0,
              demo:0,
              file:'',
              shequ:[],
              download:[],
              size:0
            }
          },
        mounted: function() {
             this.$api.getcomm_list().then((res) => {
               console.log(res)
                let data = res.data
                this.shequ = data
             })
          },
          methods:{
            onHide() {
              this.$router.push({
                name: 'HomeIndex'
              })
          },
            //调用相册&相机
            fileClick() {
              $('#upload_file').click();
            },
            //调用手机摄像头并拍照
            getImage() {
              let cmr = plus.camera.getCamera();
              cmr.captureImage(function(p) {
                plus.io.resolveLocalFileSystemURL(p, function(entry) {
                  compressImage(entry.toLocalURL(),entry.name);
                }, function(e) {
                  plus.nativeUI.toast("读取拍照文件错误:" + e.message);
                });
              }, function(e) {
              }, {
                filter: 'image'
              });
            },
            //从相册选择照片
            galleryImgs() {
              plus.gallery.pick(function(e) {
                let name = e.substr(e.lastIndexOf('/') + 1);
                compressImage(e,name);
              }, function(e) {
              }, {
                filter: "image"
              });
            },
            //点击事件,弹出选择摄像头和相册的选项
            showActionSheet() {
              let bts = [{
                title: "拍照"
              }, {
                title: "从相册选择"
              }];
              plus.nativeUI.actionSheet({
                  cancel: "取消",
                  buttons: bts
                },
                function(e) {
                  if (e.index == 1) {
                    this.getImage();
                  } else if (e.index == 2) {
                    this.galleryImgs();
                  }
                }
              );
            },
            fileChange(el) {
              this.files= document.getElementById("upload_file").files;
              console.log(this.files);
              for(let i=0;i<this.files.length;i++){
                this.datas.append("file",this.files[i]);
              }
              this.show1=false;
              console.log(typeof this.files);
              console.log(this.files);
              if (!el.target.files[0].size) return;
              this.fileList(el.target);
              el.target.value = ''
            },
            fileList(fileList) {
              let files = fileList.files;
              for (let i = 0; i < files.length; i++) {
                //判断是否为文件夹
                if (files[i].type != '') {
                  this.fileAdd(files[i]);
                } else {
                  //文件夹处理
                  this.folders(fileList.items[i]);
                }
              }
            },
            //文件夹处理
            folders(files) {
              let _this = this;
              //判断是否为原生file
              if (files.kind) {
                files = files.webkitGetAsEntry();
              }
              files.createReader().readEntries(function (file) {
                for (let i = 0; i < file.length; i++) {
                  if (file[i].isFile) {
                    _this.foldersAdd(file[i]);
                  } else {
                    _this.folders(file[i]);
                  }
                }
              })
            },
            fileAdd(file) {
              let _this = this;
              //总大小
              this.size = this.size + file.size;
              //判断是否为图片文件
              if (file.type.indexOf('image') == -1) {
                file.src = 'wenjian.png';
                this.imgList.push({
                  file
                });
               this.file=file
              
              } else {
                let reader = new FileReader();
                reader.vue = this;
                reader.readAsDataURL(file);
                reader.onload = function () {
                  file.src = this.result;
                  this.vue.imgList.push({
                    file
                  });
                }
              }
    //图片转为base64编码
    this.file=file console.log('11111',this.file) var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (e) { var imgcode = reader.result // console.log('111111',imgcode) _this.download.push(imgcode) } },


    //普通文件上传
           addFile: function() {
                var storage = window.sessionStorage
                var str = storage.getItem("user");  
                console.log(str)
                var user = JSON.parse( str );
                var _this = this;
                let inputDOM = this.$refs.inputer;
                // let oldLen = this.filLen;
                this.file = inputDOM.files[0];
                let len = this.file.length;
                let size = Math.floor(this.file.size / 1024);
                if (size > 20 * 1024 * 1024) {
                  alert("请选择20M以内的图片!");
                  return false;
                } 
                console.log('11111111',this.file)
               let files=this.file
               this.path=files.path
                 console.log('11111111',this.path)
                _this.datas.append('file',this.file)
              //  this.fileList(files);
            },
    
    
    

    //提交 commit() {
    var storage = window.sessionStorage var str = storage.getItem("user"); console.log(str) var user = JSON.parse( str ); let imgcode = this.download console.log(imgcode) let that = this if(this.demo===0){ alert('请选择小区') return false } this.$api.fase_wxupload(imgcode,user,this.demo).then((res) => { if(imgcode){ alert('上传成功') } var data = res.data if (data['status'] === 1) { that.show2 = true } else if (data['status' === 2]) { that.content = '上传失败,请重试或联系网站管理员!' that.show2 = true } else if (data['status'] === 99) { that.title = '抱歉' that.content = '请先登陆再操作!' that.show2 = true } }) }, fileDel(index) { this.size = this.size - this.imgList[index].file.size;//总大小 this.imgList.splice(index, 1); }, bytesToSize(bytes) { if (bytes === 0){ return '0 B'; } let k = 1000, // or 1024 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; }, dragenter(el) { el.stopPropagation(); el.preventDefault(); }, dragover(el) { el.stopPropagation(); el.preventDefault(); }, drop(el) { el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfer); }, shows(et,tx){ this.strut=et; this.txt=tx; }, handleClick(){ this.$store.commit('add') }, }, } </script>
  • 相关阅读:
    ReactNative typescript路径别名配置,vscode不识别@/youpath配置方法
    代码片段:js数组对象排序
    ScreenToGif SharpDx 下载失败问题
    springboot的@CrossOrigin注解解决细粒度的配置跨域
    java 连接Kafka报错java.nio.channels.ClosedChannelExcep
    zookeeper日常报错总结
    Spring Aop、拦截器、过滤器的区别
    搭建zookeeper单机版以及简单命令的使用
    java后台代码发送邮件
    java后台调用http请求
  • 原文地址:https://www.cnblogs.com/chaihtml/p/12418696.html
Copyright © 2020-2023  润新知