首页 > 其他分享 >Vue中实现图片上传,修改文件名称

Vue中实现图片上传,修改文件名称

时间:2023-01-11 00:22:30浏览次数:33  
标签:Vue name 报错 file 文件名称 上传

前提:直接flie.name的话是不可行的,并且还会报错,所以得用以下方式。

详解:拦截文件上传
文件对象(file)是不能直接修改文件名的,file.name 是只读属性,如果你强行赋值,会直接报错,所以只能拦截掉 Antd design-> uploader 的默认上传行为,改为自己上传。下面为核心 HTML 代码,主要是利用 before-upload 事件来阻止上传

  var file = new File([file], "****.xlsx");
  console.log(file,'----------')

file文件为上传完拿到的对象。效果如下

标签:Vue,name,报错,file,文件名称,上传
From: https://www.cnblogs.com/panwudi/p/17042322.html

相关文章

  • Vue3 异步数据渲染模板,ref 获取不到真实节点
    获取异步数据,并把数据渲染到模板中,比如todolist等。ref只有在模板渲染之后才可以获取,而异步获取数据期间,模板可能没有被渲染。因此,直接在setup执行期间获取ref、甚至......
  • vue2,新闻渲染效果
    做一个新闻渲染的效果,最后呈现的效果   数据放入父组件中,公共样式放入子组件中父组件中引入子组件,放入数组,然后进行样式渲染<template><divclass="zong"><n......
  • 一点vue的基础(1)
    Vue的特点遵循MVVM模式编码简洁,体积小,运行效率高,适合移动/PC端开发它本身只关注UI,也可以引入其它第三方库开发项目html中包含了一些JS语法代码,语法......
  • vue之KeepAlive 组件缓存
    简单使用<!--非活跃的组件将会被缓存!--><KeepAlive><component:is="activeComponent"/></KeepAlive>讲解默认会缓存内部的所有组件实例,但我们可以通过inclu......
  • vue子传父
    子传父1.先在父级页面的子组件上加上自定义事件 <SearchSelector @attrinfo="propsinfo" />2.在子组件里面写方法传//点击事件,当点击的时候向父级页面传值  ......
  • vue 父组件给子组件传值监听
    <template><divclass="pie-pic"ref="piePic"></div></template><script>exportdefault{name:"PiePic",props:['piePicOption'],data(){retur......
  • 38、商品服务--属性分组---前端组件抽取&VUE中父子组件的交互
    一、父子组件传递数据:1、子组件给父组件传递数据:事件机制即子组件给父组件发送一个事件,携带上数据this.$emit("事件名",携带的数据...)1.1)使用elementui的树形控件的n......
  • web自动化测试-文件上传与弹框处理
    实战演示文件上传input标签使用自动化上传,先定位到上传按钮,然后send_keys把路径作为值给传进去.如图所示,是企业微信文件上传的页面定位到标签为input,type为file的元......
  • Vue中的内置指令
    1.v-text作用是:向其所在的节点中渲染文本内容//与插值语法的区别:v-text会替换掉节点中的全部数据{{xxx}}不会conststr='我是一个字符串'<divv-text='str'></div......
  • vue3 使用clodop打印插件实现不预览直接打印
    一、下载安装C-LODOPhttps://www.lodop.net/download.html   解压文件后点击exe程序,启用服务   将上述的LodopFuncs.js文件放到工程某个文件下  ......