Vue 使用 element-ui组件中 el-upload 上传图片
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
默认已经引进 element-ui 组件
简单的使用可查看官方API
列出自己在使用中遇到的问题
<el-upload>无法在手机中使用
刚开始用下面的语句限制上传文件的类型
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
下面的代码,在pc端使用是可以正常使用,但在手机端使用时,显示不支持
<el-upload
ref="icon"
class="upload-demo"
name="infos"
drag
:limit=1
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
list-type="picture"
action="http://localhost/a.php"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
解决方法:
将 上面的 accept 改为 下面的形式
:accept="'image/*'"
就可以使用了
<el-upload>上传图片给服务端
<el-upload>必要的参数
- name值 //后端接收用
- :auto-upload="false" //false为选取图片后不上传,true为选取图片后立即上传
- action="src" //上传后端的地址
- ref="icon" //用于手动上传时的元素标记:
代码示例:
<el-upload
ref="icon"
class="upload-demo"
name="infos"
drag
:limit=1
:auto-upload="false"
:accept="'image/*'"
list-type="picture"
action="http://localhost/b.php"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超500kb</div>
</el-upload>
<button @click="submitForm()">点击上传图片</button>
export default {
name: "register",
methods: {
submitForm() {
//submit()方法既是通知 el-upload 上传图片
this.$refs.icon.submit(); //this.$refs.icon 是上面定义的 ref="icon"
}
}
}
后台接收代码(php)
下面的代码,就能将 el-upload 上传的图片保存在 img_logo 文件夹下
$_FILES['infos']中的 infos 是 el-upload 中定义的 name="infos"
//b.php
<?php
if(isset($_FILES['infos'])){
$imgname=$_FILES['infos']['name'];
$tmp = $_FILES['infos']['tmp_name'];
$imgna=substr($imgname,0,strrpos($imgname,'.'));
move_uploaded_file($tmp,'./img_logo/'.$imgna.".png");
}
?>
如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题
ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)