点击按钮实现文件上传及控制文件上传类型

1.原生js实现文件上传

html部分:

<input id="uploadBillsInp" type="file" name="file" @change="UploadFile" style="display: none;">
<button class="popBlueBtn addConfigurationSetBtn" @click="upload">上传文件</button>

js部分：

upload(event) {   //代替执行上传功能
  let it = event.target;
  $(it).next().click();
},
UploadFile() {    //上传文件
  let msg = new FormData();
  msg.append('file', $('#uploadBillsInp')[0].files[0]);
  msg.append('enctype', 'multipart/form-data');
  this.$post('接口地址',msg, {
headers: {'Content-Type': 'multipart/form-data'},
fileType: 'text'
}).then(data => {
  console.log(data)
 });},

2.elementUI实现文件上传

<el-upload class="upload-demo" action="111" :limit="1" :http-request="UploadFile" :show-file-list="false" :file-list="fileList">
  <el-button size="small" type="primary">上传</el-button></el-upload>
  export default{
    data(){
      return{
        fileList: [],
      }
    },
    methods:{
      UploadFile(content) {//上传文件
        let msg = new FormData();
        msg.append('file', content.file);
        msg.append('enctype', 'multipart/form-data');
        this.$post('接口地址', msg, {
          headers: {'Content-Type': 'multipart/form-data'},
          fileType: 'text'  //上传文件类型设置
        }).then(data => {
          console.log(data);
          }
        });
      },
    }
  }
 

3.文件上传类型正则验证

if (!/\.(png|jpg)$/.test(text)) {
    //文件上传类型不是.png和.jpg时需要做的操作
    return false;
    }

4.重复上传同一张图片时会导致无法上传成功，需要清空value值

$('#uploadBillsInp').val('');