vue 上传文件携带其他参数

师去掉那一横~~就是帅

已于 2023-09-07 11:41:32 修改

阅读量2.1k

点赞数

文章标签： javascript vue.js 前端

于 2023-09-07 11:40:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46067308/article/details/132720014

版权

文章讲述了如何在VueElement-UI的el-upload组件中上传文件，并附带其他参数，使用FormData和XMLHttpRequest进行交互，包括on-change事件处理、进度监听和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
        }