需求是:上传文件

前提是:上传文件的接口IP是不固定的。因此不能写死。


第一次解决方法:

使用h5自带的input type=file时,使用change触发上传事件

<input class="exportss" type="file" id="fileExport" @change="handleFileChange" ref="inputer">
      const inputDOM = this.$refs.inputer
      this.file = inputDOM.files[0] // 通过DOM取文件数据
      let size = Math.floor(this.file.size / 1024)
      this.formData = new FormData() // new一个formData事件
      this.formData.append('file',data.file)
      this.formData.append('xxx', xxx)
      this.formData.append('yyy', yyy)
      inputDatas(this.formData).then(response => {})

一开始可以正常上传文件,后来发现,上传一次后,再次上传相同文件就无法触发上传事件了。

推测是因为使用的是change方法。


于是决定使用vue + element自带的el-uploader

代码如下:

                  <el-upload
                  ref="upload"
                  :data="inputdata"
                  class="upload-demo"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-preview="onpreview"
                  :before-upload="beforeAvatarUpload"
                  :on-error="handleError"
                  :on-success="handleSuccess"
                  :file-list="fileList">
                  <el-button :loading="loadings.isInport" class="btn-special blue-btn" icon="el-icon-upload" size="mini" type="primary">导入</el-button>
                  </el-upload>

action为上传文件的地址,可手动拼接

若需要token验证,可添加:header="header"

headers: {
   Authorization: Cookies.get('token') 
   //从cookie里获取token,并赋值 Authorization ,而不是token
}

结论:以上方法可以实现需求。

 

Logo

前往低代码交流专区

更多推荐