美文网首页
上传文件夹

上传文件夹

作者: 素衣白纱丶 | 来源:发表于2019-07-18 19:53 被阅读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()
          }
        })
      },

    相关文章

      网友评论

          本文标题:上传文件夹

          本文链接:https://www.haomeiwen.com/subject/yvyrlctx.html