Bootstrap

vue 上传文件携带其他参数

vue element-ui el-upload
上传文件时需要携带其他参数

 <yu-upload class="upload-demo" action="/" :on-change="loadJsonFromFile" :auto-upload="false"  :limit="1">
 	<yu-button size="mini" type="primary">点击上传</yu-button>
 </yu-upload>Ï

on-change 属性 获取选择文件

loadJsonFromFile(file, fileList) {
   console.log('file',file); //文件
   console.log('fileList',fileList);//文件列表
 },

利用接口上传文件以及其他参数

 uploadSure(){
          const _this = this
          let formData = new FormData()
          formData.append('operater','管理员')
          formData.append('file',_this.uploadFiles[0].raw)
          const xhr = new XMLHttpRequest()
          xhr.open('post','/upload/excel')
          xhr.onreadystatechange = function() {
          //---------可以注释
		 if (xhr.readyState === 4 && xhr.status === 200) {
		 	 var data = JSON.parse(xhr.responseText)
		     if (data.status === 200) { // 上传文件成功
		     // 将服务器返回的图片地址,设置为 <img> 标签的 src 属性
		        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
		     } else { // 上传文件失败
		         console.log(data.message)
		     }
		 }
		}
		//----------

          xhr.onerror = function(){
            _this.$message.error('上传失败')
          }
          xhr.onload = function (evt){
            const res = JSON.parse(evt.target.response)
           //接口返回结果
          }
          //监听文件进度
          xhr.upload.onprogress = function (event){
            if(event.lengthComputable){
              var percent = event.loaded/event.total *100
              console.log('percent',percent);
            }
          }
          xhr.send(formData)
        }
;