精华内容
下载资源
问答
  • vue手动上传文件
    2022-05-21 23:22:43

    1.一定要关闭自动提交

     <el-upload :action="'http://'+ serverIp +':8081/file/upload'" :auto-upload="false" ref="upload" :on-success="success" :on-error="error">

    2.使用ref操作dom实现手动提交

    <el-button  @click="submit" style="margin-left:20px" type="success" size="small" icon="el-icon-share">文件上传</el-button>

    方法:

     submit(){
            this.$refs.upload.submit();
        },

    更多相关内容
  • el-upload手动上传文件,文件和填写的表单数据一起提交给后端,单文件上传

    el-upload默认选中文件后直接上传服务器,但是在很多场景中需要我们在这个基础上做一些处理,所以统一整理了下,供参考

    1,点击提交按钮上传文件

    //一定要关闭自动提交 auto-upload为false
    
    <el-upload ref="upload" drag action="https://jsonplaceholder.typicode.com/posts/" 
     :file-list="fileList" accept=".txt,.xlsx,.xls,.csv" 
    :auto-upload="false" :multiple="false">
           <i class="el-icon-upload"></i>
            <div class="el-upload__text">
               将文件拖到此处,或<em>点击上传</em>
             </div>
              <div class="el-upload__tip" slot="tip">
               只能上传.txt,.xlsx,.xls,.csv文件,且不超过500kb
               </div>
     </el-upload>
    
    
     //用ref操作dom实现手动提交
     <el-button  @click="submit" type="success" size="small" icon="el-icon-share">文件上传</el-button>
    
    
    //点击提交给后端
    submit(){
       this.$refs.upload.submit()
     },

    2,在表单中文件和其余表单数据一起提交(这种方法对于1的需求也适用,点击提交的时候直接把文件传递过去就行了)

    //标签属性设置和上面差别不大  但是这里不需要action地址  可以设置为#
    
    <el-upload ref="upload" drag action="#" 
    :on-change="onChange" :file-list="fileList" accept=".txt,.xlsx,.xls,.csv" 
    :auto-upload="false" :multiple="false">
           <i class="el-icon-upload"></i>
            <div class="el-upload__text">
               将文件拖到此处,或<em>点击上传</em>
             </div>
              <div class="el-upload__tip" slot="tip">
               只能上传.txt,.xlsx,.xls,.csv文件,且不超过500kb
               </div>
     </el-upload>
    
    onChange(file, fileList) {
     // 这一步,是展示最后一次选择的csv文件 
          if (fileList.length > 0) {
            this.fileList = [fileList[fileList.length - 1]]; 
          }
          this.mutipartFile = new FormData();
          this.mutipartFile.append("file", file.raw);
          this.form.fileName = file.name
        },
    
     //提交表单
     submitForm() {
         //因为我这里和后端约定的是把表单中数据转换成JSON格式放在FormData中传递过去。
        //处理后的this.mutipartFile传递给后端就可以
        //具体传参格式需要和后端约定好
        this.mutipartFile.set("param", JSON.stringify(this.form));
        console.log(this.mutipartFile);
        axios({
          method:'POST',
          url:请求接口,
          data:this.mutipartFile 
          }).then(res=>{
         console.log('提交成功')
        }),
       },
    展开全文
  • }, /** 提交按钮 */ 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 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间 详细、友好的文档,事无巨细 最近做一个后台系统用的功能 总结下遇见的...
  • vue3.0+ant-design-vue 实现手动上传,限制文件格式和大小并可以预览 1.首先上效果图,在这部分需求里限制了只能上传一个图片并且限制了文件的格式和大小 2.代码如下 <a-form-item label="上传图片"> &...

    1.首先上效果图,在这部分需求里限制了只能上传一个文件并且限制了文件的格式和大小
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    2.代码如下

    		<a-form-item label="上传图片">
                <a-upload
                  v-model:file-list="fileList"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  @preview="handlePreview"
                >
                  <div v-if="fileList.length < 1"> // 上传一张图片后隐藏上传按钮
                    <plus-outlined />
                  </div>
                </a-upload>
                <a-modal
                  :visible="previewVisible"
                  :footer="null"
                  @cancel="handleCancelPreview"
                >
                  <img style="width: 100%" :src="previewImage" />
                </a-modal>
     		</a-form-item>
    

    方法部分:

     const beforeUpload = (file) => {
          const isLt50M = file.size / 1024 / 1024 < 50;
          const isJpgOrPng =
            file.type === "image/jpeg" || file.type === "image/png";
          return new Promise((resolve, reject) => {
            reader.readAsDataURL(file);
            reader.onload = (e) => {
              if (isLt50M && isJpgOrPng) {
                file.thumbUrl = e.target.result;
                fileList.value = [...fileList.value, file];
                return false;  // 阻止自动上传动作
              } else {
                fileList.value = [];
                message.error("请检查图片格式和大小!");
                reject(file);
              }
            };
            reader.onerror = (error) => reject(error);
          });
        };
    
        const handleCancelPreview = () => {
          previewVisible.value = false;
        };
    
        const handlePreview = async (file) => {
          if (!file.url && !file.preview) {
            file.preview = await getBase64(file);
          }
          previewImage.value = file.url || file.preview;
          previewVisible.value = true;
        };
    
        function getBase64(file) {
          return new Promise((resolve, reject) => {
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (error) => reject(error);
          });
        }
    

    官方文档上没有写到如何同时满足手动上传和限制文件格式和大小并且实现预览,所以自己总结了一下。
    文笔稚嫩,希望对你有所帮助。

    展开全文
  • vue3手动上传文件

    千次阅读 2022-04-22 17:48:07
    记录文件上传
  • vue批量手动上传文件

    2022-08-13 10:26:22
    vue element批量上传文件
  • vue上传文件

    千次阅读 2022-01-06 08:56:02
    创建formData方法,把文件流以及所有需要上传的数据通过formData.append传入formData中,上传请求中的data中只需要放一个formData就可以了。 (此处request为封装的请求方法,省事可以不封装)
  • html <el-upload ref="upload" class="upload-demo" action="#" accept=".xlsx, .xls" :auto-upload="false" //取消自动上传 :on-success="onSuccess" :on-change="handleChange
  • 但是antd 的官方例子中给的都是当点击上传的时候直接把图片上传到服务器,antd upload手动上传_Ant Design Upload 组件之手动上传,AntDesignVue之自定义上传(Upload),ant design upload组件的beforeUpload阻止默认...
  • 1.html: 2.打开选择文件 3.点击上传
  • VUE文件手动上传

    2022-01-16 14:56:01
    VUE文件手动上传
  • 上传后改变图片的名字,进行自定义,避免传重复的图片 <el-upload class="upload-demo" :action="uploadUrl" :file-list="ruleForm.fileList" :before-upload="beforeUploadFile" :on-error=...
  • 基于AntDesign vue的自定义文件上传,可选择上传文件类型、个数限制、支持图片预览,其他文件格式下载;
  • vue文件上传显示进度条的使用

    千次阅读 2022-01-19 10:47:35
    文件上传显示进度条 1、所用到的UI组件 el-dialog el-upload el-progress 2、基础用法 样式 <el-dialog title="文件上传" :visible.sync="excelVisible" width="40%" :close-on-click-modal="false" :...
  • vue-simple-uploader图片上传并预览
  • vue手动上传excel

    2020-06-30 11:39:29
    手动上传excel和上传图片类似,只是格式不一样 html: <el-upload class="upload-demo inline-block" action="string"//随便填 size="mini" accept=".xls, .xlsx"//限制上传类型 :...
  • 一、文件上传 记一次文件上传文件下载,写的比较仓促,就记录了代码过程,其他没有详细解释,只为记录自己知识积累的过程。 1、单文件上传 HTML部分: <el-row v-for="(item,index) in DebugfileList"> &...
  • ``` name="file" listType="picture-card" :fileList="fileList" :multiple="true" @preview="handlePreview" :beforeUpload="beforeUpload" @change="handleChange" ...上传时一直报file为空
  • vue使用el-upload实现文件手动上传功能和自定义上传文件参数名
  • 接口中需要上传文件并接收文件流,el-upload只能采用手动上传的方式 <template> <el-upload action="" :http-request="httpRequest" :show-file-list="false"> <el-button size="small" type=...
  • 主要介绍了vue中使用input[type="file"]实现文件上传功能,实现代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 批量上传文件

    千次阅读 2021-01-11 17:21:50
    业务背景:一次性批量上传多个文件,只请求一次接口,则手动提交到后台 简单说明一个实现思路: 1.前端vue统一处理多个文件保存到formData对象中,请求后台接口 2.后台接口使用HttpServletRequest 进行接收,可转化成...
  • 项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug。比如用某上传组件,明明注明(:multiple=”false”),可实际上还是能多选,上传的时候依然发送了多个文件;...
  • 实现文件的选择,判定 首先是upload模板 <el-upload ref="upload" :limit="1" :before-upload="beforeUpload" :auto-upload="false" :headers="headers" :on-success="handleSuccess
  • vue上传 excel文件

    千次阅读 2022-06-09 14:32:15
    一个上传 excel的文件功能
  • element+Vue上传zip文件

    千次阅读 2021-08-06 01:53:56
    ref : 绑定DOM元素action:接口地址data : 你要传入的参数on-preview:点击文件列表中已上传文件时的钩子name:文件的参数名on-remove :移除你上传文件on-error 失败运行的钩子函数on-success 成功运行的钩子...
  • vue文件上传和下载

    千次阅读 2021-10-16 15:08:08
    before-upload :上传文件之前的钩子,参数为上传的文件,上传格式的规定要求可在此钩子函数中写(示例中规定上传格式xlsx或xls) on-success :文件上传成功时的钩子,function(response, file, fileList) ref :...
  • 由驱动的用于文件上传Vue组件。 。 在和可以找到与Nuxt SSR兼容的组件。 感谢 发展 # install your dependencies npm install # install vue-dropzone npm install vue2-dropzone (or with yarn) yarn add vue2-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,938
精华内容 3,575
关键字:

vue手动上传文件