tailwingcss和elmentui冲突么
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tailwingcss和elmentui冲突么相关的知识，希望对你有一定的参考价值。
参考技术A 冲突。_饩龇椒ㄓ泻芏啵绻梢远_tml改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那么接下来是不改变 细化选择符。
_偃缛质钦庋炊ㄒ逡桓鲈氐难降模?.abc background:#000，同时这个class为abc的元素是隶属于某个元素的，比如下面这样的html代码结构
_敲丛谙富_ss里面，只需要在.abc前面加多一个父元素的选择符就行了：.container .abc background:#fff
_庋?.container .abc的优先级就大于了.abc，自然细化css里面的background设置也就不会被全局CSS覆盖了。
?
原生方式实现图片，文件上传，和使用ElmentUI使用Drag方式自动上传图片，手动上传图片
文章目录
原生方式实现图片，文件上传
1.前端代码（后端在下面，可以共用）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片显示并上传</title>
<!-- cdn引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--cdn引入ElementUI组件必须先引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- cdn引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<form action="http://localhost:8081/upload1/uploadFile1" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">提交</button>
</form>
</div>
<script type="text/javascript">
// 配置对象 options
const vm = new Vue(
// 配置选项(option)
// element: 指定用vue来管理页面中的哪个标签区域
el: '#app',
data:
message:"helloword",
,
methods:
);
</script>
</body>
</html>
自动 上传
1.前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<!-- Vue开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入element样式element -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
message
<h2>文件上传</h2>
<el-upload
class="upload-demo"
drag
action="http://localhost:8081/upload1/uploadFile1"
multiple
:file-list="fileList"
:on-change="onChange"
:on-success="handleSucess"
:show-file-list = "true"
:before-upload="beforeAvatarUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<img v-if="imageUrl" :src="imageUrl" class="avatar"/>
</el-upload>
<h2>文件下载</h2>
<p>模拟下载,假设下面是某个文件列表</p>
<div @click="downFile"><i class="el-icon-document"></i>娱乐圈不为人知的秘密.pdf</div>
</div>
<script>
new Vue(
el: "#app",
data()
return
fileList: [],
fileinfo:
virtualPath: ""
,
message:"hello",
imageUrl:"",
,
methods:
onChange(file,fileList)
console.log("onChange执行");
console.log(file)
this.fileList = fileList;
console.log(fileList,"fileList")
,
beforeAvatarUpload(file)
console.log(file,"file");
// console.log(fileList,"fileList");
alert(file.type)
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isPDF = file.type === 'application/pdf';
const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const isXLS = file.type === 'application/vnd.ms-excel'
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG && !isPDF && isXLSX && isXLS)
ELEMENT.Message.error("上传文件格式只能是 JPG PNG TXT PDF XLS XLSX格式!");
// this.$message.error('上传文件格式只能是 JPG PNG TXT PDF XLS XLSX格式!');
if (!isLt2M)
ELEMENT.Message.error("上传头像图片大小不能超过 2MB!");
// this.$message.error('上传头像图片大小不能超过 2MB!');
return (isJPG || isPNG || isPDF || isXLSX || isXLS) && isLt2M;
,
// 上传成功调用此方法，可以获取到后端返回的文件名称
handleSucess(response,file,fileList)
// alert("上传成功")
console.log("存储路径:"+response.virtualPath)
console.log("文件名:"+response.fileName)
alert(response.fileName)
this.fileinfo.virtualPath=response.virtualPath;
// 文件下载的路径
this.imageUrl = `http:/localhost:8081/upload/downloadFile1?name=$response.data`
,
downFile()
alert("开始下载")
//动态获取刚刚上传的文件的路径,所以必须先上传,再下载,当然你也可以把路径写死
//实际项目中,获取目标文件路径即可,这个不是重点
console.log(this.fileinfo.virtualPath)
var url = "http://localhost:8080/downloadFile?filePath="+this.fileinfo.virtualPath
//这里直接使用window.open 发起请求在新页面显示返回的内容,也可以使用axios,这样比较简单,效果类似
window.open(url)
)
</script>
</body>
</html>
后端代码
1. controller层
package com.qfedu.fmmall.controller;
import com.qfedu.fmmall.service.UploadService1;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import java.io.IOException;
@RestController
@CrossOrigin
@RequestMapping("/upload1")
public class UploadController1
@Resource
private UploadService1 uploadService1;
@PostMapping("/uploadFile1")
public String uploadFile(MultipartFile file) throws IOException
return uploadService1.uploadFile(file);
2. service层
package com.qfedu.fmmall.service;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
public interface UploadService1
public String uploadFile(MultipartFile file) throws IOException;
3. serviceimpl
package com.qfedu.fmmall.service.impl;
import com.qfedu.fmmall.service.UploadService1;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@Service
public class UploadService1impl implements UploadService1
@Value("$img.path")
private String localPath;
@Override
public String uploadFile(MultipartFile file) throws IOException
System.out.println("file=" + file);
String originalFilename = file.getOriginalFilename();
// 截取.jpg
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
String name = UUID.randomUUID().toString().substring(1, 8);
File file1 = new File(localPath);
System.out.println("localPath="+localPath);
if(!file1.exists())
file1.mkdirs();
file.transferTo(new File(localPath+name+suffix));
return name+suffix;
4. yml文件进行配置相关路径
注意一下路径后面需要加上 \\ ,需要有空格
img:
path: D:\\img\\img2\\
ElementUI图片进行上传讲解
手动上传
- el-upload组件里面加上
ref="doctypeCrfile"
:auto-upload="false"
- 在确定的这个click事件中加上
var vm = this;
vm.$refs.doctypeCrfile.submit();
在这里插入代码片
直接用这个前端代码就行：
1.直接替换自动上传的前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<!-- Vue开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入element样式element -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<el-form>
<el-form-item>
<el-upload
ref="doctypeCrfile" class="upload-demo"
drag
action="http://localhost:8081/upload1/uploadFile1"
multiple
:file-list="fileList"
:on-change="onChange"
:on-success="handleSucess"
:auto-upload="false" :show-file-list="true"
:before-upload="beforeAvatarUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
</el-upload>
<h2>文件下载</h2>
<p>模拟下载,假设下面是某个文件列表</p>
<div @click="downFile"><i class="el-icon-document"></i>娱乐圈不为人知的秘密.pdf</div>
</el-form-item>
</el-form>
<!-- 表单外面 -->
<span slot="footer" class="dialog-footer">
<el-button size以上是关于tailwingcss和elmentui冲突么的主要内容，如果未能解决你的问题，请参考以下文章
Vue ElmentUI message组件customClass使用方法
elmentUI 选择年月日时分秒-并且只选择当前时间之后的时间