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

        最近做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.效果图：
在这里插入图片描述

本文链接：https://blog.csdn.net/qq_43271452/article/details/89521625

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

（附源码）ssm基于微信小程序的社区老人健康管理服务系统的设计与实现毕业设计011513_基于微信小程序的社区管理系统设计论文-程序员宅基地

文章浏览阅读2k次，点赞7次，收藏30次。对于本社区老人健康管理服务系统的设计来说，通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。社区老人健康管理服务系统使用Java语言，采用基于MVVM模式的SSM技术进行开发，使用 Eclipse 2017 CI 10 编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台HTML+CSS 技术完成系统的开发。具体根据社区老人健康管理服务系统的现状来进行开发的，具体根据用户需求实现社区老人健康管理服务系统网络化的管理，各类信息有序地进行存储...._基于微信小程序的社区管理系统设计论文

Java中的Action、Service和DAO层功能区分及示例解释-程序员宅基地

文章浏览阅读555次。Action/Service/DAO简介：Action是管理业务(Service)调度和管理跳转的。Service是管理具体的功能的。Action只负责管理，而Service负责实施。DAO只完成增删改查，虽然可以1-n，n-n，1-1关联，模糊、动态、子查询都可以。但是无论多么复杂的查询，dao只是封装增删改查。至于增删查改如何去实现一个功能，dao是不管的。总结这三者，通过例子来解释：Acti..._java中action

Servlet详解-程序员宅基地

文章浏览阅读321次。Servlet （Server Applet），全称Java Servlet。是用Java编写的服务器端程序，其，生成动态的Web内容。Servlet运行于支持Java的应用服务器中（如Tomcat等）。从实现上讲，Servlet可以响应任何类型的请求，但绝大多数情况下，servlet只用来扩展基于HTTP协议的服务器。

VMware与艾莫讯国产300编程电缆兼容性问题_虚拟机插入mpi电缆卡死-程序员宅基地

文章浏览阅读1.3k次。VMware-15.1.0 -VMware-15.5.5之间所有的版本都与国产艾莫讯0CB20电缆有兼容问题。具体故障是只要连接到虚拟机并驱动就会造成虚拟机死机。西门子官方的0CB20电缆不会存在这个问题。说明国产电缆和官方电缆的实现方式还是有区别，这次蓝屏死机BUG主要是由VMware引起的，为了验证我还特意去咸鱼上整了一条官方电缆。我为什么知道这么清楚呢，因为vmware每一次更新我都会去升级，然后去现场干活。接下来的事情你们应该能想到了，去现场都读程序，结果插上电缆就死机。急忙跟客户说.._虚拟机插入mpi电缆卡死

java找不到符号解决办法-程序员宅基地

文章浏览阅读1.6w次，点赞11次，收藏15次。一、java找不到符号如果你的代码里没有报错，明明是存在的。但是java报错找不到符号。像下面这样子。二、解决步骤1.清除编码工具缓存本人用的idea， eclipse清除缓存方式有需要的可以百度一下！2.如果是mavne项目的先clean 再package总结提示：一定要package本人刚开始就是知道clean了，没有package导致问题一直没有解决。在此记录一下！...

【Nginx】配置详解_nginx修改配置文件如何生效-程序员宅基地

文章浏览阅读1.3w次，点赞4次，收藏22次。访问到未定义的扩展名的时候，就默认为下载该文件。#服务器并发处理能力，值越大并发能力越强（受自身配置限制）一个http块可以包含多个server块，而一个server块就等于一个虚拟主机。nginx配置最频繁的部分，比如代理，日志，缓存、第三方模块等等。包括文件引入、MIME-TYPE定义，日志自定义、连接超时等等。需要注意的是http块可以包括http全局块和server块。server块又包含全局server块和location块。二、容器部署的项目，配置nginx。2.2，events块。..._nginx修改配置文件如何生效

随便推点

Buck电路（PWM实现与闭环反馈）电力系统仿真_buck电路带反馈控制-程序员宅基地

文章浏览阅读962次，点赞2次，收藏11次。Buck电路（PWM实现与闭环反馈）电力系统仿真_buck电路带反馈控制

jQuery实现轮播图代码_jquery轮播图代码-程序员宅基地

文章浏览阅读699次，点赞11次，收藏8次。一个简单的jQuery轮播图代码，首先，定义了一个slideshow-container的div容器，其中包含了所有轮播图幻灯片。每个幻灯片都包含一个mySlides的类名，并且使用CSS将其隐藏。在showSlides()函数中，遍历所有幻灯片并将它们隐藏，然后显示当前索引的幻灯片。最后，我们使用setTimeout()函数来每隔2秒钟调用showSlides()函数，从而实现了轮播效果。它使事情变得更简单，使用jQuery能够以最小的努力在Web上构建复杂的交互性。_jquery轮播图代码

android adb install apk的安装流程_full install must include a base packag-程序员宅基地

文章浏览阅读1.1w次，点赞6次，收藏23次。一、简介 1.Android上应用安装可以分为以下几种方式：通过adb命令安装：adb 命令包括adb push/install 用户下载的Apk，通过系统安装器packageinstaller安装该Apk。packageinstaller是系统内置的应用程序，用于安装和卸载应用程序。系统开机时安装系统应用。电脑或者手机上的应用商店自动安装第三种系统安装我们在上个章节P..._full install must include a base packag