加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vue实现文件上传

发布时间:2020-12-16 23:11:36 所属栏目:百科 来源:网络整理
导读:!-- multiple多个文件上传 accept文件类型-- input type ="file" @change ="addFile" ref ="inputer" accept ="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/msword,application/
<!-- 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);
        });

    },}
            

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读