默认已经引进  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>必要的参数

  1. name值                     //后端接收用
  2. :auto-upload="false"  //false为选取图片后不上传,true为选取图片后立即上传
  3. action="src"               //上传后端的地址
  4. 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分支:1 个月前 )
c345bb45 5 个月前
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 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐