有关vue组件上传问题

简介: 有关vue组件上传问题
今天在做需求的时候,有一个是关于营业执照上传的问题:这里坐一下记录,方便后续相同问题 直接使用

代码:这里用的若依框架 更多详细见若依文档

<el-upload 
 :action="uploadImgUrl" 
 list-type="picture-card" 
 :on-success="handleUploadSuccess" 
 name="file"
 :on-remove="handleRemove" 
 :on-exceed="handleExceed" 
 :show-file-list="true" 
 :limit="limitPicture"
:headers="headers" 
:file-list="fileList" 
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= 1}">
<i class="el-icon-plus"></i>
</el-upload>
return{
  limitPicture: 1, //图片上传限制
  uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
  fileList: [],
  // 设置上传的请求头部
  headers: {
    Authorization: "Bearer " + getToken()
  },
}
      // 上传成功回调
      handleUploadSuccess(res) {
        // 赋值对应的营业执照信息
        this.dialogImageUrl = res.url
      },
      // 文件个数超出
      handleExceed() {
        this.$message.error(`上传文件数量不能超过 ${this.limitPicture} 个!`);
      },
      // 删除图片(这里营业执照只允许一张 所以删除直接清空即可)
      handleRemove(file, fileList) {
        this.fileList = []
        this.dialogImageUrl = ""
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

效果

相关文章
|
5天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
2天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
20 11
|
6天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
6天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
4天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
13 4
|
4天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
14 4
|
5天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
4天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
14 2
|
5天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
6天前
|
JavaScript
vue 函数化组件
vue 函数化组件
下一篇
无影云桌面