zoukankan      html  css  js  c++  java
  • vue实现文件上传

    <!-- multiple多个文件上传 accept文件类型-->
                    <input
                      type="file"
                      @change="addFile"
                      ref="inputer"
                      accept="application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/pdf"
                    >
    <p>支持文件格式:.ppt .pptx .doc .docx .pdf ,单个文件不能超过20M.</p>
    --------------------------------------------------------------------
    js
    export default {
      data() {
        return {
                 formData: new FormData(),
                  file: {}, //文件数据  
                }
        }
    }
        
    
    methods: {
      //上传文件
        addFile: function() {
          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;
          }
          this.formData.append("file", this.file);
          this.$http({
            method: "post",
            url: _this.HOST + api.upload,
            data: this.formData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
            .then(function(res) {
            })
            .catch(function(err) {
              console.log("新建分享", err);
            });
    
        },  
    }
                

    多个文件情况与单个文件其实一致的

  • 相关阅读:
    1523. K-inversions URAL 求k逆序对,,,,DP加树状数组
    Football 概率DP poj3071
    Collecting Bugs poj2096 概率DP
    E. Exposition
    Subsequence
    D. How many trees? DP
    hdu 1542 线段树 求矩形并
    Huge Mission
    2013 ACM/ICPC Asia Regional Chengdu Online hdu4731 Minimum palindrome
    008 jackson的一些使用记录
  • 原文地址:https://www.cnblogs.com/zhaozhenghao/p/11376768.html
Copyright © 2011-2022 走看看