• 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);
            });
    
        },  
    }
                

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

  • 相关阅读:
    mysql查询重复
    JS全局屏蔽回车事件
    java判断某个字符串包含某个字符串的个数
    给Eclipse提速的7个技巧(转)
    Mysql中将查询出来的多列的值用逗号拼接
    模仿淘宝手机号码输入框
    浏览器的默认样式
    GUBE---一丝
    学习CSS布局
    CSS 居中大全
  • 原文地址:https://www.cnblogs.com/zhaozhenghao/p/11376768.html
Copyright © 2020-2023  润新知