精华内容
下载资源
问答
  • html <el-upload ref="upload" class="upload-demo" action="#" accept=".xlsx, .xls" :auto-upload="false" //取消自动上传 :on-success="onSuccess" :on-change="handleChange

    html

    <el-upload
                ref="upload"
                class="upload-demo"
                action="#"
                accept=".xlsx, .xls"
                :auto-upload="false" //取消自动上传
                :on-success="onSuccess"
                :on-change="handleChange"
              >
    
    import {uploadExcel} from '@/api/home.js'
    handleChange(file) {
          console.log(file)
          this.uploadFile = file.raw
          console.log(file, this.uploadFile)
           if (this.uploadFile) {
            const form = new FormData()
            form.append('file', this.uploadFile, this.uploadFile.name)
            uploadExcel(form).then(res => {
              if (res.code === 200) {
                console.log(res)
              }
            })
          }
        },
    

    api

    // 公共api
    import request from '@/utils/request'
    // 上传单个文件到临时文件夹
    export function uploadExcel(data) {
      return request({
        url: '/common/temporary',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data
      })
    }
    
    
    展开全文
  • }, /** 提交按钮 */ dataFormSubmit: debounce(function() { if (this.fileList.length > 0) { //手动上传文件 this.$refs.upload.submit() } else { this.$message({ message: '请选择上传的设备模板', type: '...
    <el-dialog :visible.sync="visible" :title="titles" :close-on-click-modal="false" :close-on-press-escape="false"
        class="videoDialog" width="35%">
        <el-form ref="dataForm" label-width="150px" class="mt15">
    <el-upload class="upload-demo" name="file" :http-request="httpRequest" :on-preview="handlePreview"
              :on-remove="handleRemove" :before-remove="beforeRemove" action="1" :file-list="fileList"
              :on-change="handleChange" :auto-upload="false" ref="upload">
              <!-- :before-upload="beforeAvatarUpload" -->
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
            </el-upload>
            <div v-if="progressSeen">
              <el-progress :stroke-width="15" :percentage="progress"></el-progress>
            </div>
      </el-form>
        <template slot="footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确认</el-button>
        </template>
      </el-dialog>
    
    export default {
    	data(){
    		return{
    			 progress: 0,
            progressSeen: false,
    		}
    	},
    	methods: {
    	//删除
    		handleRemove(file, fileList) {
    		//接口调用  removeFile(this.dataForm.id).then(response => {})
            removeFile(this.dataForm.id).then(response => {
              if (response.code == 200) {
                this.fileList = fileList
              } else {
                this.$message({
                  message: '删除失败!',
                  type: 'error'
                });
              }
            })
          },
          //下载
          handlePreview(file) {
            let url=file.url
            //因为文件在本地
            window.open(url)
          },
          //删除之前的询问
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }?`);
          },
          //文件变化时调用
          handleChange(file, fileList) {
            const extension2 = file.name.split(".")[1] === "docx";
            const extension3 = file.name.split(".")[1] === "doc";
            if (!extension2 && !extension3) {
              this.$message({
                message: '上传文件只能是 .docx、.doc 格式!',
                type: 'error'
              });
              this.fileList =[]
              return false
            }else{
              if (fileList.length > 0 & this.fileList.length > 0) {
                this.$confirm('此操作将覆盖当前文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.fileList = [fileList[fileList.length - 1]] // 这一步,是 展示最后一次选择的csv文件
                }).catch(() => {
                  this.fileList = [fileList[0]]
                });
              } else {
                this.fileList = [fileList[0]]
              }
            }
          },
          httpRequest(param) {
            let that = this
            let fileObj = param.file // 相当于input里取得的files
            let fd = new FormData() // FormData 对象
            fd.append('file', fileObj) // 文件对象
            fd.append('id', this.dataForm.id)
            that.submitEdtor(fd)
          },
          submitEdtor(fd) {
            let that = this
            //显示进度
            that.progressSeen = true;
            that.progress = 0
            this.$refs["dataForm"].validate(valid => {
              if (valid) {
              //进度条
                const interval = setInterval(() => {
                  if (that.progress >= 99) {
                    clearInterval(interval)
                    return
                  }
                  that.progress += 1
                }, 20)
              //接口调用  uploadFile(fd).then(response => {})
                  uploadFile(fd).then(response => {
                    if (response.code === 200) {
                      this.process = 100
                      this.progressSeen = false
                      this.$message({
                        message: '上传成功',
                        type: 'success',
                        duration: 500,
                        onClose: () => {
                        }
                      })
                    }
                  });
              }
            });
          },
          /** 提交按钮 */
          dataFormSubmit: debounce(function() {
            if (this.fileList.length > 0) {
            //手动上传文件
              this.$refs.upload.submit()
            } else {
              this.$message({
                message: '请选择上传的设备模板',
                type: 'error',
                duration: 500,
                onClose: () => {
                }
              })
            }
          })
    	}
    }
    
    展开全文
  • vue手动上传excel

    2020-06-30 11:39:29
    手动上传excel和上传图片类似,只是格式不一样 html: <el-upload class="upload-demo inline-block" action="string"//随便填 size="mini" accept=".xls, .xlsx"//限制上传类型 :...

    手动上传excel和上传图片类似,只是格式不一样
    html:

    <el-upload
              class="upload-demo inline-block"
              action="string"//随便填
              size="mini"
              accept=".xls, .xlsx"//限制上传类型
              :http-request="httpRequest"
              :file-list="showExcelist"//上传文件list
              :before-upload="beforeAvatarUpload"
            >
            <el-button size="small">选择文件</el-button>
    </el-upload>
    <el-button size="mini" type="primary" @click="saveexcel">保存</el-button>
    

    js:

    //上传前的操作,获取到上传excel的file
    httpRequest(params) {
          this.excelFile = params;
          let formdata = new FormData();
          formdata.append("File", params.file);
          formdata.append("FileName", params.file.name);
    },
    beforeAvatarUpload(file) {
    	//格式过滤
          const isXls =
            file.type === "application/vnd.ms-excel"
              ? true
              : file.type ===
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              ? true
              : false;
          if (!isXls) {
            this.$message.error("上传的文件只能是xls以及xlsx格式!");
          } else {
            this.excelFile = file;//获取到file 单独存一下
          }
          return isXls;
        },
    //走接口,传给后端
    saveexcel() {
          if (this.excelFile.file) {
            let formdata = new FormData();//传参格式手动改为fromdata
            let params = this.excelFile;
            formdata.append("batchFile", params.file);
            formdata.append("FileName", params.file.name);
            importSaledetail(formdata).then(res => {//请求后端,自己封装的axios
              if (res.rtnCode == 200) {//成功
                this.$notify({
                  title: "成功",
                  message: res.msg,
                  type: "success"
                });
                this.excelFile = []; //成功后参数置空
                this.showExcelist = [];//成功后上传文件list置空
              } else  {//失败
                this.$message.error(res.msg);
              }
            });
         } else {
            this.$message.error("请选择文件!");
         }
    },
    
    展开全文
  • 1.html: 2.打开选择文件 3.点击上传

    1.html:

    2.打开选择文件

    3.点击上传

     

     

     

     

     

    展开全文
  • 一、文件上传 记一次文件上传文件下载,写的比较仓促,就记录了代码过程,其他没有详细解释,只为记录自己知识积累的过程。 1、单文件上传 HTML部分: <el-row v-for="(item,index) in DebugfileList"> &...
  • vue 批量上传文件

    千次阅读 2021-01-11 17:21:50
    业务背景:一次性批量上传多个文件,只请求一次接口,则手动提交到后台 简单说明一个实现思路: 1.前端vue统一处理多个文件保存到formData对象中,请求后台接口 2.后台接口使用HttpServletRequest 进行接收,可转化成...
  • 使用单文件Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间 详细、友好的文档,事无巨细 最近做一个后台系统用的功能 总结下遇见的...
  • ref : 绑定DOM元素action:接口地址data : 你要传入的参数on-preview:点击文件列表中已上传文件时的钩子name:文件的参数名on-remove :移除你上传文件on-error 失败运行的钩子函数on-success 成功运行的钩子...
  • 这次给大家带来Vue封装上传文件组件步骤详解(附代码),Vue封装上传文件组件的注意事项有哪些,下面就是实战案例,一起来看一下。一、之前遇到的一些问题项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,...
  • 上传后改变图片的名字,进行自定义,避免传重复的图片 <el-upload class="upload-demo" :action="uploadUrl" :file-list="ruleForm.fileList" :before-upload="beforeUploadFile" :on-error=...
  • 背景平,过现前个能文使近记接的端问对字用近记接时工作中经常会遇到需要上传文件的情况,如果你用ant design 或者element ,它们都提供了上传的组件。 我们分别来看一下element 和 antd 手动上传怎么处理不事时功来...
  • vue 文件上传,供大家参考,具体内容如下首先 先说一下想要实现的效果就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现vue 实现vue 页面代码class="upload-demo"ref="upload"action...
  • 实现单文件上传手动上传.action="":auto-upload='false':file-list="fileList":on-change="handleChange">选取文件上传到服务器export default {name: "test",data() {return {fileList: [],};},methods: {/*重新...
  • 实现文件的选择,判定 首先是upload模板 <el-upload ref="upload" :limit="1" :before-upload="beforeUpload" :auto-upload="false" :headers="headers" :on-success="handleSuccess
  • ElementUI的Upload组件携带表单数据进行手动上传 项目需求本来是文件单独上传,再提交表单数据,请求两次接口。现在需求有变,要求在触发表单传输事件的同时上传文件,也就是提交表单数据和上传文件同步进行,请求一...
  • vue项目,用的element-ui,上传文件不支持IE9, 而且IE9不支持 new FormData() 后来查到 vue-upload-component 插件支持IE9, 但是使用过程中有以下限制 文件上传后,不能重复提交 如果上传要携带其他data数据,...
  • vue 文件上传

    千次阅读 2018-08-11 18:20:40
    vue 文件上传 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 &amp;lt;el-upload class=&quot;upload-...
  • 背景 平时工作中经常会遇到需要上传文件的情况,如果你...ant design 手动上传文件 antd官网有手动上传的demo:  在这里简单写一写实现,主要有 在jsx中引入Upload组件,将 fileList 作为props传入,fileList为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,552
精华内容 2,620
关键字:

vue手动上传文件

vue 订阅