上传文件夹

2019-07-18  本文已影响0人  素衣白纱丶

html:

        <el-button type="warning" plain>
          <a  href="javascript:;" class="input-file input-fileup" >
            <i class="iconfont icon-beike"></i>自动上传
            <input  class="fileUploaderClass" accept="*/*" type='file' name="file" webkitdirectory style="position: absolute;cursor: pointer;opacity: 0;left: 0;top: 0;width: 100%;height: 100%;" @change.stop="changesData"/>
          </a>
        </el-button>

js:


image.png
  changesData (content) {
    const loading = this.$loading({
      lock: true,
      text: '上传文件中,请稍等...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    var formData = new FormData()
    for (let i = 0; i < content.target.files.length; i++) {
      let webkitRelativePath = content.target.files[i].webkitRelativePath //文件路径,看后台是否需要
      formData.append(webkitRelativePath, content.target.files[i])
    }
    uploadFiles(formData).then(({data})=>{  //uploadFiles为请求接口方法,formData为参数
      if(data && data.code === 0){
        this.$message.success('上传成功')
        loading.close()
      }else if(data.code === 1) {
        this.$alert(data.msg)
        loading.close()
      }else{
        this.$message.error('文件上传失败,请联系系统管理员!')
        loading.close()
      }
    })
  },
上一篇下一篇

猜你喜欢

热点阅读