zoukankan      html  css  js  c++  java
  • vue中图片批量上传

    首先说一下会用到几个知识点

    1.
    event.target.files[0]

    获取的是上传的图片的一些参数如下图:

    可以自己依次打印看看

    console.log(event, event.target, event.target.files, event.target.files[0])

    2.

    HTML5中FileReader

    在FileReader出现之前,前端的图片预览是这样实现的:
    把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。

    这种方法的缺点是:
    必须要先把图片上传到服务器。如果上传的图片很大,而网速又很慢,这就需要等待很久预览图片才会显示出来了,如果用户预览图片后发现不太满意,想重新选择一张图片,这时候还要把已经上传到服务器上的图片给删除掉。

    有了HTML5的FileReader对象以后,预览图片变得简单多了,不再需要后台的配合,这种方法的思路是:

    通过FileReader.prototype.readAsDataURL()
    方法把图片文件转成base64编码,然后把base64编码替换到预览图片的src属性即可。

    let that = this;
    let file = event.target.files[0];
    let reader = new FileReader();
    // 调用reader.readAsDataURL()方法,把图片转成base64
    reader.readAsDataURL(file);
    // 监听reader对象的onload事件,当图片加载完成时,把base64编码賦值给预览图片
    reader.onload = function () {
      file.src = this.result;
      // console.log(this); 这里的this是FileReader对象
      // console.log(file)
      // 再把file对象添加到img数组
      that.imgList.push({
        file
      });
    }

    完整FileReader api
    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

    3.
    HTML5中FormData

    FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

    先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下:

    var oMyForm = new FormData();
    oMyForm.append("username", "Groucho");
    oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

    如果已经有一个Form表单,只需要把这个form dom元素作为参数传入FormData构造函数即可:

    var form=document.getElementById("form1");
    var formData=new FormData(form);
    var oReq = new XMLHttpRequest();
    oReq.onreadystatechange=function(){
      if(oReq.readyState === 4){
        if(oReq.status === 200){
          var json=JSON.parse(oReq.responseText);
          var result = ''; 
        }
      }
    }
    oReq.open("POST", "server.php");
    oReq.send(formData); 

    在vue中使用:

      data () {
        return {
          imgList: [],
          size: 0,
          imgData: {
              accept: 'image/gif, image/jpeg, image/png, image/jpg',
          },
          img: require('./5.jpg'),
          // 选中的省、市、区
          city: [],
          // 3级联动城市数据来源area-data
          pcaa: pcaa,
          show: true
        }
      },
      methods: {
        // dom触发
        fileClick() {
          this.$refs.uploadfile.click()
        },
        // 上传图片
        fileChange (event) {
          // console.log(event, event.target, event.target.files, event.target.files[0])
          if (!event.target.files[0].size) return;     
          let files = event.target.files;
          // 批量上传
          for (let i = 0; i < files.length; i++) {
            // 单张上传
            this.fileAdd(files[i]);
          }
          // console.log(this.imgList)
        },
        // 单张上传
        fileAdd (file) {
          // console.log(file);
          let type=file.type;//文件的类型,判断是否是图片  
          let size=file.size;//文件的大小,判断图片的大小
          if(this.imgData.accept.indexOf(type) === -1){
            alert('请选择我们支持的图片格式!');
            return false;
          }
          if(size > 3145728){
            alert('请选择3M以内的图片!');
            return false;
          }
          let that = this;
          // 总大小
          this.size = this.size + file.size;
          let reader = new FileReader();
          // 调用reader.readAsDataURL()方法,把图片转成base64
          reader.readAsDataURL(file);
          // 监听reader对象的onload事件,当图片加载完成时,把base64编码賦值给预览图片
          reader.onload = function () {
            file.src = this.result;
            // console.log(this); 这里的this是FileReader对象
            // 再把file对象添加到imgList数组
            that.imgList.push({
              file
            });
          }
        },
        // 计算转换图片大小
        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];
        },
        // 删除
        fileDel (index) {
          this.size = this.size - this.imgList[index].file.size;//总大小
          this.imgList.splice(index, 1);
          this.img = require('./5.jpg');
        },
        // 更换预览图片
        changeImg (index) {
          // console.log(this.imgList[index].file.src)
          this.img = this.imgList[index].file.src;
    
        }
      },
      computed: {
    
      },
      watch: {
        // 监听imgList数据变化,不能超过9张图片
        imgList: function () {
          if (this.imgList.length > 9) {
            this.imgList.length = 9;
            // 超过9张后重新计算图片大小
            this.size = 0;
            for (let i = 0; i < 9; i ++) {
              this.size = this.size + this.imgList[i].file.size;
            }
            // console.log(this.imgList);
          }
        }
      },
     

    参考文献:

    https://blog.csdn.net/leileibrother/article/details/79020758

    https://www.cnblogs.com/lwwen/p/6210126.html

    https://blog.csdn.net/weixin_41957098/article/details/80351914

  • 相关阅读:
    Windows SDK编程(Delphi版) 之 应用基础,楔子
    一个小问题引发的论证思考
    Delphi 组件开发教程指南(7)继续模拟动画显示控件
    用PyInstaller将python转成可执行文件exe笔记
    使用 .Net Memory Profiler 诊断 .NET 应用内存泄漏(方法与实践)
    Microsof Office SharePoint 2007 工作流开发环境搭建
    How to monitor Web server performance by using counter logs in System Monitor in IIS
    LINQ之Order By
    window 性能监视器
    内存泄露检测工具
  • 原文地址:https://www.cnblogs.com/gr07/p/9628523.html
Copyright © 2011-2022 走看看