vue + elemetui — upload解决跨域、实现图片上传_vue 图片跨域-程序员宅基地

技术标签: upload  跨域  vue  elementui  图片上传  

        最近做Vue项目,需要用到图片上传的功能,因为是PC端后台项目,故而采用了element-ui组件库里的upload上传的组件。本文主要解决上传时的跨域问题。
        action属性便是上传的地址,需要进行跨域。话不多说,直接上代码:
          1.进行跨域设置:config->index.js

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // proxyTable: {},
    proxyTable: {
      '/api':{
      		//以下接口胡编,项目中需要使用自己的
	        target:'http://www.baidu.com:9527',  //这里配置的是 请求接口的域名
	        // secure: false, // 如果是https接口,需要配置这个参数
	        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
	        pathRewrite:{
	          '^/api':'' //路径重写,这里理解成用'/api'代替target里面的地址。
	        }
        },
    },
}

          2.组件中进行使用,属性、方法请参考element-ui官方文档

<el-upload
      action="/api/web/img/upload"   //图片上传地址
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :file-list="fileList2"
      :on-error="uploadError"
      :before-upload="beforeAvatarUpload"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
   <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

          3.效果图:
                     在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43271452/article/details/89521625

智能推荐

java奇偶排序算法_奇偶排序-程序员宅基地

文章浏览阅读871次。在《java高并发程序设计》一书中看到关于一种并行算法排序方法:奇偶排序。结合书上与网上的各项资料,在这里按自己的理解做下梳理。介绍冒泡排序:是串行算法,在每次迭代过程中,对于每个元素可能与前面元素交换,也可能和后面的元素交换,数据的相关性比较强很难直接改成并行算法。奇偶排序:或奇偶换位排序,或砖排序,是一种相对简单的排序算法,最初发明用于有本地互连的并行计算。这是与冒泡排序特点类似的一种比较排序..._奇偶排序算法的java

JAVA card 应用开发(四) Java Card CAP 文件组件分析_如何统合分析一张javacard-程序员宅基地

文章浏览阅读5.5k次。Java Card CAP 文件组件分析Java Card CAP 文件组件分析 00.1Java Card CAP 文件组件分析 01——Header Component.4Java Card CAP 文件组件分析 02——Directory Component.7Java Card CAP 文件组件分析 03——Applet Component.9Java _如何统合分析一张javacard

【网络安全】零基础入门网络安全劝退指北-程序员宅基地

文章浏览阅读696次,点赞11次,收藏17次。础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!**

nginx使用二级路径反向代理不同IP和端口_nginx 一个location 代理的同ip不同端口的同名服务-程序员宅基地

文章浏览阅读3.8k次。场景描述:通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1.100的80端口,location/admin部署在172.20.1.32的8080端口上。解决方案:使用nginx反向代理,配置如下:server { listen 80; server_name demo.domain.com; #通过访问s_nginx 一个location 代理的同ip不同端口的同名服务

2023华数杯数学建模C题思路分析 - 母亲身心健康对婴儿成长的影响_2023年数学建模母婴-程序员宅基地

文章浏览阅读6k次,点赞7次,收藏51次。母亲是婴儿生命中最重要的人之一,她不仅为婴儿提供营养物质和身体保护, 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况,如抑郁、焦虑、 压力等,可能会对婴儿的认知、情感、社会行为等方面产生负面影响。压力过大 的母亲可能会对婴儿的生理和心理发展产生负面影响,例如影响其睡眠等方面。附件给出了包括 390名 3 至 12 个月婴儿以及其母亲的相关数据。_2023年数学建模母婴

“access denied for user ‘user‘@XX.XX.XX.XX (using password: yes)“ 报错原因-程序员宅基地

文章浏览阅读1.6w次。"access denied for user 'user'@XX.XX.XX.XX (using password: yes)" 是一个数据库连接错误信息,表示用户 'user' 在指定的 IP 地址 XX.XX.XX.XX 下尝试进行数据库访问,但由于提供的密码错误,被拒绝了访问权限。_access denied for user

随便推点

线程池参数——workQueue用法_线程池参数workqueue-程序员宅基地

文章浏览阅读1.5k次。线程池参数的 workQueue 决定了缓存任务的排队策略,对于不同的业务场景,我们可以使用不同的排队策略。我们只需要实现BlockingQueue 这个接口即可。介绍一下常用的有三种workQueue1. SynchronousQueue(阻塞队列)SynchronousQueue没有容量,是无缓冲等待队列,是一个不存储元素的阻塞队列,会直接将任务交给消费者(即丢给空闲的线程去执行),必须等队列中的添加元素被消费后才能继续添加新的元素,否则会走拒绝策略,所以使用SynchronousQueu_线程池参数workqueue

Golang Gin 路由组 RouterGroup 路由分类处理请求_go gin 路由分组-程序员宅基地

文章浏览阅读1.1k次。在前面已经学习了gin框架如何处理请求,解析请求,返回数据。在实际的项目当中,项目往往是以模块化来进行划分和开发的,所谓的模块化就是按照功能来划分,比如会有产品模块,会有用户模块,会将用户相关的进行统一的开发,放到用户模块当中,和产品相关的放在产品相关的模块当中,这样即方便开发者进行统一的开发也方便在系统的维护过程当中方便维护。_go gin 路由分组

python爬虫云南昆明二手房数据可视化大屏全屏系统设计与实现(django框架)-程序员宅基地

文章浏览阅读2.2k次,点赞10次,收藏7次。python爬虫云南昆明二手房数据可视化大屏全屏系统设计与实现(django框架),Python和Django作为成熟的开发语言和框架,拥有广泛的开发者社区和丰富的资源支持,能够满足本研究的开发需求。其次,随着房地产市场的不断发展,相关企业和决策者对于数据可视化的需求日益增强,因此本研究具有较高的经济价值和社会价值。然而,现有研究多集中在宏观层面的数据分析,针对特定地区(如云南昆明)的二手房市场数据可视化研究相对较少。项目的界面和功能都可以定制,包安装运行!

Cisco AP IOS命名规则_思科ap型号命名规则-程序员宅基地

文章浏览阅读514次。Note: Some older Cisco access points did not run IOS, such as the Aironet 340 which ran only VxWorks, and the 1000 series lightweight APs. Access Point IOS is distributed as a tar file. These tar fil..._思科ap型号命名规则

CodeCounter for mac(代码计数器)-程序员宅基地

文章浏览阅读523次。便于使用只需打开 CodeCounter 并拖放一个或多个代码项目即可。别担心;您以后可以随时添加更多内容并同时监控它们!可定制通过使用不同的设置,您可以放心确保结果尽可能准确。排除特定的文件扩展名、生成的或缩小的文件?绝对地!多才多艺的您可以按语言(代码行、空行、注释等)或按文件查看所有代码行。您也想在漂亮的图表中看到所有这些吗?完毕。只需 3 个简单步骤1.拖动您的项目只需将任何项目拖放到应用程序上即可;是的,这就是开始所需的一切!2.微调您想排除某些文件扩展名吗?

2021最新 超详细环境配置 避开安装cuda所有坑_cuda_sdk_path-程序员宅基地

文章浏览阅读3.6k次,点赞5次,收藏36次。先安装好Anaconda1.提供几个会用到的网站cuda toolkit历史版本:https://developer.nvidia.com/cuda-toolkit-archivecuda toolkit最新版本:https://developer.nvidia.com/cuda-downloadspytorch:https://pytorch.orgvisual studio2019:https://visualstudio.microsoft.com/zh-hans/vs/2.检查当前显卡驱_cuda_sdk_path

推荐文章

热门文章

相关标签