注意：
action为上传的后台路径地址
imageUrl： 为图像的路径
accept：上传的图片格式可以自定义
$emit：操作后返回对应的数据给父级vue
一张图片只给一个路径，
多张图片需要给一个数组
1.element-UI 头像上传，返回一条路径
vue代码
<template>
<div>
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
name='files'
accept=".png,.gif,.ico"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
import Api from '../../Api'
export default {
name:'servec_type',
data() {
return {
imageUrl:'',
fileList: [],
uploadUrl:Api.upload+'/uploadico',
upLoadData:{}
};
},
props:['filesico'],
watch: {
'filesico': {
immediate:true,
handler:function(files,oldVal){
if(files){
this.$data.imageUrl = files
}else{
this.$data.imageUrl = ''
}
}
}
},
methods: {
handleAvatarSuccess(res, file) {
var str = res;
if(this.$data.imageUrl){
this.axios.post(Api.upload+"/files_edit",{
url:this.$data.imageUrl
}).then(res => {
if(res.data.status == 200){
this.$message({
type: 'success',
message: res.data.msg
});
}else{
this.$message({
type: 'error',
message: res.data.msg
});
}
});
}else{
this.$emit('updateicos',str);
this.imageUrl = URL.createObjectURL(file.raw);
}
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isLt2M;
}
},
created: function () {
},
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
display: block;
}
</style>
thinkphp后台图片上传实现返回上传的路径地址
public function uploadico(){
// 获取表单上传文件
$file = request()->file('files');
if (empty($file)) {
$this->error('请选择上传文件');
}
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
// $this->success('文件上传成功');
$sql = $info->getSaveName();
$avator=str_replace('\\','/',$sql);
$dk = substr($_SERVER['HTTP_HOST'],-4);
$sql = "http://localhost:".$dk."/uploads/".$avator;//路径地址可以自己更改
echo json_encode($sql,JSON_UNESCAPED_SLASHES);
} else {
// 上传失败获取错误信息
$this->error($file->getError());
}
}
// 删除图片数据删除文件
public function files_edit()
{
$info_del = input('post.url');
$result = substr($info_del,strripos($info_del,"uploads"));
if($result){
$myFile = $result;
$fh = fopen($myFile, 'w') or die("can't open file");
fclose($fh);
$myFile = $result;
unlink($myFile);
}
echo json_encode(array("status"=>200,"msg"=>"修改成功"));
// $this->dele_all_data('files',array('belong_id'=>input('post.belong_id'),'name'=>input('post.name')));
}
2.element-UI 图片墙或者文件上传，返回路径，上传的后台php与上传一张公用一个方法，
<template>
<div>
<el-upload
:action="uploadUrl"
name='files'
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="handleAvatarSuccess"
:file-list="fileList"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import Api from '../../Api'
export default {
name:'uploadimg',
data() {
return {
filearr:[],
fileList:[],
dialogImageUrl:"",
uploadUrl:Api.upload+'/uploadimg',
dialogVisible: false
};
},
props:['uploadimg'],
watch: {
'uploadimg': {
immediate:true,
handler:function(files,oldVal){
if(files){
this.$data.fileList = files
this.$data.filearr = files
}else{
this.$data.fileList = []
this.$data.filearr = []
}
}
}
},
methods: {
handleRemove(file, fileList) {
this.axios.post(Api.upload+"/files_edit",{
url:file.response
}).then(res => {
this.$message({
type: 'error',
message: res.data.msg
});
if(res.data.status == 200){
var arrs = this.$data.filearr;
for(var i in arrs){
if(arrs[i].uid == file.uid){
arrs.splice(i,1);
}
}
this.$emit('uploadimg',arrs);
this.$message({
type: 'success',
message: res.data.msg
});
}
});
},
imgarr(res, fileList){
var file_li = {
name:fileList.name,
percentage:fileList.percentage,
url:fileList.response,
size:fileList.size,
uid:fileList.uid,
response:fileList.response
}
this.$data.filearr.push(file_li);
this.$emit('uploadimg',this.$data.filearr);
},
handleAvatarSuccess(res, fileList){
this.imgarr(res,fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
<style>
</style>
3.element-UI 上传后返回为base64一张图片编码。该出使用了查看功能，没有后台代码。
<template>
<div class="com-upload-img" style="height: 100%;">
<div class="img_group">
<ul class="img_box">
<li v-for="(item,index) in imgArr" :key="index">
<img :src="item" alt="" />
<div class="img_box_input">
<i class='fa fa-search-plus' @click="lookImg(item,index)"></i>
<i class="img_delete fa fa-trash-o fa-lg" @click="deleteImg(index)"></i>
</div>
</li>
<li class="img_input" v-show="button">
<input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">
<div class="filter">
+
</div>
</li>
</ul>
</div>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="lookimg" alt="">
</el-dialog>
</div>
</template>
<script>
import Vue from 'vue'
import Api from '../../Api'
export default {
name: 'uploadbaselogo',
data() {
return {
imgData: '',
imgArr: [],
look: false,
button : true,
imgSrc: '',
lookimg: '',
dialogVisible:false,
allowAddImg: true,
}
},
props: ['img'],
watch: {
'img': {
immediate: true,
handler: function(files, oldVal) {
if(files){
this.imgArr[0] = files
this.button = false
}else{
this.imgArr = []
this.button = true
}
}
}
},
methods: {
lookImg(img, index) {
this.lookimg = img
this.look = true;
this.dialogVisible = true;
},
looknone() {
this.look = false
},
changeImg: function(e) {
var _this = this;
var file = e.target.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function() {
img.src = this.result
}
var img = new Image,
width = 1024, //image resize 压缩后的宽
quality = 0.8, //image quality 压缩质量
canvas = document.createElement("canvas"),
drawer = canvas.getContext("2d");
img.onload = function() {
canvas.width = width;
canvas.height = width * (img.height / img.width);
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/png", quality); // 这里就拿到了压缩后的base64图片
var imgdata = [];
imgdata.push(base64);
// 清空文件上传控件的值 不清理会出现选择同样的图片会无法触发input事件了
e.target.value = null;
_this.imgArr.push(imgdata[0])
_this.$emit('uploadbaselogo', _this.imgArr[0]);
_this.button = false
}
},
deleteImg: function(index) {
this.imgArr.splice(index, 1);
if(this.imgArr.length < 5) {
this.allowAddImg = true;
}
this.button = true
this.$emit('uploadbaselogo', null);
},
},
}
</script>
<style scoped="scoped">
/*div{
margin: 0px;
border: none;
box-sizing: border-box;
}*/
.img_box,
.img_box li {
list-style: none;
margin: 0px;
padding: 0px;
box-sizing: border-box;
list-style-type: none;
/*background: #000000;*/
opacity: 1;
}
.img_box li {
margin: 0px;
}
.look-img {
/*width: 100%;
margin: 0px;
height: 100%;
z-index: 4;
background: rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 1px #0055AA;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
display: table*/
}
.look-img img {
/*margin: auto;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;*/
}
.img_box li:hover {
box-shadow: 0px 0px 1px 0px #000000;
opacity: 0.9;
}
.img_box li:hover .img_box_input {
z-index: 1;
opacity: 1;
}
.img_box_input {
top: 0px;
position: absolute;
padding-top: 30px;
width: 100%;
z-index: 0;
opacity: 0;
left: 0px;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.img_box_input i {
margin: 5px;
color: #fff;
cursor: pointer;
padding: 5px;
}
.img_input {
width: 100px;
height: 100px;
}
.img_box input {
background: #006699;
border: none;
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
box-shadow: none;
}
.img_box .filter {
background: #fff;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
top: 0px;
left: 0px;
font-size: 40px;
color: #006699;
box-sizing: border-box;
text-align: center;
line-height: 90px;
border: 1px dashed #3276B1;
}
.img_box li {
position: relative;
float: left;
width: 100px;
height: 100px;
text-align: center;
overflow: hidden;
}
.img_box li img {
width: 100%;
height: 100%;
}
.img_box li i {}
.img_show_box {
width: 100px;
position: relative;
}
.img_delete {
/*position: absolute;
z-index: 3;
color: #F43838;
top:45px;
left: 50px;
width: 20px;
height: 20px;*/
}
</style>
4.vue element 多张图片返回base64
<template>
<div class="com-upload-img" style="height: 100%;">
<div class="img_group">
<ul class="img_box">
<li v-for="(item,index) in imgArr" :key="index">
<img :src="item" alt="" />
<div class="img_box_input">
<i class='fa fa-search-plus' @click="lookImg(item,index)"></i>
<i class="img_delete fa fa-trash-o fa-lg" @click="deleteImg(index)"></i>
</div>
</li>
<li class="img_input">
<input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">
<div class="filter">
+
</div>
</li>
</ul>
</div>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="lookimg" alt="">
</el-dialog>
<!--<div class="look-img" v-show="look" @click="looknone">
<img :src="lookimg" style="height: auto;overflow: auto;" alt="" />
</div>-->
</div>
</template>
<script>
import Vue from 'vue'
import Api from '../../Api'
export default {
name: 'ComUpLoad',
data() {
return {
imgData: '',
imgArr: [],
look: false,
imgSrc: '',
lookimg: '',
dialogVisible:false,
allowAddImg: true,
}
},
props: ['img'],
watch: {
'img': {
immediate: true,
handler: function(files, oldVal) {
if(files){
if(files[0]){
this.imgArr = files
}else{
this.imgArr = []
}
}
}
}
},
methods: {
lookImg(img, index) {
this.lookimg = img
this.look = true;
this.dialogVisible = true,
this.$emit('uploadbaseimg', this.imgArr);
},
looknone() {
this.look = false
},
changeImg: function(e) {
var _this = this;
var file = e.target.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function() {
img.src = this.result
}
var img = new Image,
width = 1024, //image resize 压缩后的宽
quality = 0.8, //image quality 压缩质量
canvas = document.createElement("canvas"),
drawer = canvas.getContext("2d");
img.onload = function() {
canvas.width = width;
canvas.height = width * (img.height / img.width);
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
//
var base64 = canvas.toDataURL("image/png", quality); // 这里就拿到了压缩后的base64图片
var imgdata = [];
imgdata.push(base64);
// _this.imgArr.push(base64);
// 清空文件上传控件的值 不清理会出现选择同样的图片会无法触发input事件了
e.target.value = null;
_this.imgArr.push(imgdata[0])
_this.$emit('uploadbaseimg', _this.imgArr);
}
},
deleteImg: function(index) {
this.imgArr.splice(index, 1);
if(this.imgArr.length < 5) {
this.allowAddImg = true;
}
this.$emit('uploadbaseimg', this.imgArr);
},
},
}
</script>
<style scoped="scoped">
/*div{
margin: 0px;
border: none;
box-sizing: border-box;
}*/
.img_box,
.img_box li {
list-style: none;
margin: 0px;
padding: 0px;
box-sizing: border-box;
list-style-type: none;
/*background: #000000;*/
opacity: 1;
}
.img_box li {
margin: 0px;
}
.look-img {
/*width: 100%;
margin: 0px;
height: 100%;
z-index: 4;
background: rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 1px #0055AA;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
display: table*/
}
.look-img img {
/*margin: auto;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;*/
}
.img_box li:hover {
box-shadow: 0px 0px 1px 0px #000000;
opacity: 0.9;
}
.img_box li:hover .img_box_input {
z-index: 1;
opacity: 1;
}
.img_box_input {
top: 0px;
position: absolute;
padding-top: 30px;
width: 100%;
z-index: 0;
opacity: 0;
left: 0px;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.img_box_input i {
margin: 5px;
color: #fff;
cursor: pointer;
padding: 5px;
}
.img_input {
width: 100px;
height: 100px;
}
.img_box input {
background: #006699;
border: none;
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
box-shadow: none;
}
.img_box .filter {
background: #fff;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
top: 0px;
left: 0px;
font-size: 40px;
color: #006699;
box-sizing: border-box;
text-align: center;
line-height: 90px;
border: 1px dashed #3276B1;
}
.img_box li {
position: relative;
float: left;
width: 100px;
height: 100px;
text-align: center;
overflow: hidden;
}
.img_box li img {
width: 100%;
height: 100%;
}
.img_box li i {}
.img_show_box {
width: 100px;
position: relative;
}
.img_delete {
/*position: absolute;
z-index: 3;
color: #F43838;
top:45px;
left: 50px;
width: 20px;
height: 20px;*/
}
</style>