当前位置: 首页 > news >正文

【vue2-el-upload上传文件】

只上传一个 并且再次上传替换上一个

<el-upload class="upload-demo" action="#" :on-change="handleChange"
                                :before-upload="beforeUpload" :show-file-list="false" :file-list="fileList"
                                :auto-upload="false" accept=".pdf,.docx,.doc">
                                <el-button size="small" type="primary">上传文件</el-button>
                            </el-upload>
                            <el-button size="small" type="primary" @click="submit">上传</el-button>
handleChange(file, fileList) {
this.file = file.raw
     console.log(file.raw)//上传的文件是file.raw
 },
 beforeUpload(file) {
                const isPdfOrWord = ['.pdf', '.docx', '.doc'].some(ext => file.name.endsWith(ext));
                if (!isPdfOrWord) {
                    this.$message.error('只能上传 PDF/Word 文件');
                    return false;
                }
                const isLt5M = file.size / 1024 / 1024 < 5;
                if (!isLt5M) {
                    this.$message.error('文件大小不能超过 5MB');
                    return false;
                }
                return true;
            },
            getdeliveryForm(object, type) {
                let that = this, params = {
                    file: this.file,
                }
                var service = axios.create({
				  baseURL: '统一请求接口前缀',
				  withCredentials: true, // 跨域支持发送cookie
				  timeout: 5000 // 请求超时时间
				})
                function postFormData(url, params) {
				  return new Promise(function (resolve, reject) {
				    service({
				      headers: {
				      //需要注意 上传文件的请求头一定是下面这个!!!!
				        'Content-Type': 'multipart/form-data', 
				        //以下都是必须要有的参
				        'user-token': userToken,
				      },
				      transformRequest: [
				        function (data) {
				          // 在请求之前对data传参进行格式转换
				          var formData = new FormData()
				          Object.keys(data).forEach(function (key) {
				            formData.append(key, data[key])
				          })
				          return formData
				        }
				      ],
				      url: url,
				      method: 'post',
				      data: params
				    })
				      .then(function (res) {
				        if (res.data.code != 200) {
				          handlerHttpError(res.data)
				          reject(res.data)
				        } else {
				          resolve(res.data)
				        }
				      })
				      .catch(function (err) {
				        if (err.message.includes('timeout')) {
				          window.ELEMENT.Message.error('服务器繁忙,请刷新页面重试!')
				        }
				        reject(err)
				      })
				  })
				}
                postFormData('url', params)
                    .then(function (res) {
                       
                    })
            },

相关文章:

  • Java应用程序的跨平台性能优化研究
  • [Web 信息收集] Web 信息收集 — 手动收集域名信息
  • SQL注入练习
  • 组件的组成和组件的嵌套关系
  • java使用word模板填充内容,再生成pdf
  • autojs例子之webView的UA切换
  • Java中的日志框架:Log4j2 vs SLF4J vs Logback
  • 【力扣】2621. 睡眠函数——认识Promise
  • JAVA若依框架
  • 在 Vue 3 中,如何缓存和复用动态组件
  • 微服务2025/2/15
  • 前缀和算法:解锁高效编程的钥匙
  • Leetcode---83.删除排序链表中的重复元素
  • 谷歌GMS认证,安卓14版本的谷歌EDLA认证详细介绍,谷歌安卓14 EDLA认证有多少测试项?
  • 2025年软考报名费用是多少?全国费用汇总!
  • HDFS数据存储与数据管理
  • Facebook Instant Game:即时游戏的新时代
  • JVM 简单内存结构及例子
  • 某住宅小区地下车库安科瑞的新能源汽车充电桩的配电设计与应用方案 安科瑞 耿笠
  • 算法系列之回溯算法
  • 微信里的网站怎么做/seo推广经验
  • 吃的网站要怎么做/如何找做网站的公司
  • 广州网站建设studstu/吴中seo页面优化推广
  • 上海做网站建设公司排名/2023年8月份新冠症状
  • 杭州微网站开发公司/网络营销方式有哪些?
  • 如何安装wordpress到usbwebserver/百度关键词优化方法