Vue 使用 element-ui组件中 el-upload 上传图片

默认已经引进  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:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈