Element

Element 提 bug 模板

by zkwap

HTML

<script src="//unpkg.com/[email protected]/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>

<div id="app"></div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

JavaScript

var Main = {
  template: `
<el-upload
   name="smfile" 
  class="upload-demo"
  action="https://sm.ms/api/upload"
  :file-list="fileList"
  :http-request="selfUpload"
  :on-success="uploadSuccess">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  `,
  data() {
    return {
     fileList : []
    }
  },
  methods: {
    uploadSuccess() {
      this.$message.success("上传图片成功！");
    },
    selfUpload() {
    	let form = new FormData(), 
            url = 'https://sm.ms/api/upload', //服务器上传地址
            file = fileObj.file;
        form.append('smfile', file);
        debugger
        let  xhr = new XMLHttpRequest();
        //  xhr.upload.onprogress = function progress(e) {
        //    debugger
        //  };
        xhr.open("post", url, true);
        xhr.send(form); //开始上传
    }
  }
}

new Vue({
  el: '#app',
  render: h => h(Main)
})